@koobiq/components 17.2.0 → 17.4.0

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) {
@@ -77,274 +81,274 @@
     $code-block: map.get(map.get($theme, components), code-block);
 
     .kbq-code-block {
-        .hljs {
-            $hljs: map.get($code-block, hljs);
+        $hljs: map.get($code-block, hljs);
 
+        .hljs {
             display: block;
             overflow-x: auto;
+        }
 
-            &-addition {
-                background-color: map.get($hljs, addition-background);
-                color: map.get($hljs, addition-color);
-            }
+        .hljs-addition {
+            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);
-            }
+        .hljs-attr {
+            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);
-            }
+        .hljs-attribute {
+            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);
-            }
+        .hljs-built_in {
+            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);
-            }
+        .hljs-bullet {
+            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);
-            }
+        .hljs-char-escape {
+            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);
-            }
+        .hljs-class {
+            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);
-            }
+        .hljs-code {
+            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);
-            }
+        .hljs-comment {
+            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);
-            }
+        .hljs-deletion {
+            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);
-            }
+        .hljs-doctag {
+            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);
-            }
+        .hljs-emphasis {
+            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);
-            }
+        .hljs-formula {
+            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);
-            }
+        .hljs-function {
+            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);
-            }
+        .hljs-keyword {
+            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);
-            }
+        .hljs-link {
+            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);
-            }
+        .hljs-literal {
+            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);
-            }
+        .hljs-meta {
+            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);
-            }
+        .hljs-meta-keyword {
+            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);
-            }
+        .hljs-meta-string {
+            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);
-            }
+        .hljs-meta-prompt {
+            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);
-            }
+        .hljs-name {
+            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);
-            }
+        .hljs-number {
+            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);
-            }
+        .hljs-operator {
+            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);
-            }
+        .hljs-params {
+            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);
-            }
+        .hljs-property {
+            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);
-            }
+        .hljs-punctuation {
+            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);
-            }
+        .hljs-quote {
+            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);
-            }
+        .hljs-regexp {
+            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);
-            }
+        .hljs-section {
+            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);
-            }
+        .hljs-selector-attr {
+            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);
-            }
+        .hljs-selector-class {
+            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);
-            }
+        .hljs-selector-id {
+            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);
-            }
+        .hljs-selector-pseudo {
+            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);
-            }
+        .hljs-selector-tag {
+            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);
-            }
+        .hljs-string {
+            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);
-            }
+        .hljs-strong {
+            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);
-            }
+        .hljs-subst {
+            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);
-            }
+        .hljs-symbol {
+            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);
-            }
+        .hljs-tag {
+            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);
-            }
+        .hljs-template-tag {
+            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);
-            }
+        .hljs-template-variable {
+            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);
-            }
+        .hljs-title {
+            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);
-            }
+        .hljs-title-class {
+            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);
-            }
+        .hljs-title-class-inherited {
+            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);
-            }
+        .hljs-title-function {
+            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);
-            }
+        .hljs-title-function-invoke {
+            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);
-            }
+        .hljs-type {
+            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);
-            }
+        .hljs-variable {
+            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);
-            }
+        .hljs-variable-constant {
+            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);
-            }
+        .hljs-variable-language {
+            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);
-            }
+        .hljs-ln-n {
+            color: kbq-code-block-hljs-attr(line-numbers-color, $hljs);
+        }
 
-            &-line-numbers {
-                color: map.get($code-block, main-code-color);
-            }
+        .hljs-line-numbers {
+            color: map.get($code-block, main-code-color);
         }
 
         &.kbq-code-block_outline {

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));

package/core/option/_option-theme.scss

@@ -10,15 +10,15 @@
     background: kbq-css-variable(list-#{$style-name}-container-background, map.get($state, container-background));
 
     .kbq-option-text {
-        color: kbq-css-variable(list-#{$style-name}-text, map.get($state, text));
+        color: kbq-css-variable(list-#{$style-name}-text-color, map.get($state, text));
     }
 
     .kbq-option-action .kbq-icon {
-        color: kbq-css-variable(list-#{$style-name}-icon-button, map.get($state, icon-button));
+        color: kbq-css-variable(list-#{$style-name}-icon-button-color, map.get($state, icon-button));
     }
 
     .kbq-option-caption {
-        color: kbq-css-variable(list-#{$style-name}-caption, map.get($state, caption));
+        color: kbq-css-variable(list-#{$style-name}-caption-color, map.get($state, caption));
     }
 }
 
@@ -34,7 +34,10 @@
 
         &.kbq-focused,
         &.kbq-active {
-            border-color: map.get($list-item, states-focused, focus-outline);
+            border-color: kbq-css-variable(
+                list-states-focused-focus-outline-color,
+                map.get($list-item, states-focused, focus-outline)
+            );
         }
 
         &.kbq-selected {

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -16,18 +16,18 @@
 
     &.kbq-checked,
     &.kbq-indeterminate {
-        border-color: kbq-css-variable(#{$base}-checked-border, map.get($style, checked, border));
-        background: kbq-css-variable(#{$base}-checked-background, map.get($style, checked, background));
+        border-color: kbq-css-variable(#{$base}-states-checked-border, map.get($style, checked, border));
+        background: kbq-css-variable(#{$base}-states-checked-background, map.get($style, checked, background));
     }
 
     &.kbq-disabled {
         & .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));
         }
 
-        border-color: kbq-css-variable(#{$base}-disabled-border, map.get($style, disabled, border));
-        background: 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: kbq-css-variable(#{$base}-states-disabled-background, map.get($style, disabled, background));
     }
 }
 

package/core/styles/_koobiq-theme.scss

@@ -119,8 +119,8 @@
         $md-config: kbq-markdown-typography-config($tokens);
     }
 
-    @include kbq-base-typography($config);
-    @include kbq-markdown-base-typography($md-config);
+    @include kbq-base-typography();
+    @include kbq-markdown-base-typography();
 
     @include kbq-alert-typography($config);
     @include kbq-badge-typography($config);