@koobiq/components 18.1.0 → 18.2.0

package/icon/_icon-button-theme.scss

@@ -11,111 +11,111 @@
 
         // FIXME: move to unified mixin
         &.kbq-theme {
-            color: kbq-css-variable(icon-button-theme-default);
+            color: var(--kbq-icon-button-theme-default);
 
             &:active,
             &.kbq-active {
-                color: kbq-css-variable(icon-button-theme-states-active);
+                color: var(--kbq-icon-button-theme-states-active);
             }
 
             &:not(.kbq-disabled):hover {
-                color: kbq-css-variable(icon-button-theme-states-hover);
+                color: var(--kbq-icon-button-theme-states-hover);
             }
 
             &.kbq-disabled {
-                color: kbq-css-variable(icon-button-theme-states-disabled);
+                color: var(--kbq-icon-button-theme-states-disabled);
             }
         }
 
         &.kbq-contrast {
-            color: kbq-css-variable(icon-button-contrast-default);
+            color: var(--kbq-icon-button-contrast-default);
 
             &:active,
             &.kbq-active {
-                color: kbq-css-variable(icon-button-contrast-states-active);
+                color: var(--kbq-icon-button-contrast-states-active);
             }
 
             &:not(.kbq-disabled):hover {
-                color: kbq-css-variable(icon-button-contrast-states-hover);
+                color: var(--kbq-icon-button-contrast-states-hover);
             }
 
             &.kbq-disabled {
-                color: kbq-css-variable(icon-button-contrast-states-disabled);
+                color: var(--kbq-icon-button-contrast-states-disabled);
             }
         }
 
         &.kbq-contrast-fade {
-            color: kbq-css-variable(icon-button-fade-contrast-default);
+            color: var(--kbq-icon-button-fade-contrast-default);
 
             &:active,
             &.kbq-active {
-                color: kbq-css-variable(icon-button-fade-contrast-states-active);
+                color: var(--kbq-icon-button-fade-contrast-states-active);
             }
 
             &:not(.kbq-disabled):hover {
-                color: kbq-css-variable(icon-button-fade-contrast-states-hover);
+                color: var(--kbq-icon-button-fade-contrast-states-hover);
             }
 
             &.kbq-disabled {
-                color: kbq-css-variable(icon-button-fade-contrast-states-disabled);
+                color: var(--kbq-icon-button-fade-contrast-states-disabled);
             }
         }
 
         &.kbq-error {
-            color: kbq-css-variable(icon-button-error-default);
+            color: var(--kbq-icon-button-error-default);
 
             &:active,
             &.kbq-active {
-                color: kbq-css-variable(icon-button-error-states-active);
+                color: var(--kbq-icon-button-error-states-active);
             }
 
             &:not(.kbq-disabled):hover {
-                color: kbq-css-variable(icon-button-error-states-hover);
+                color: var(--kbq-icon-button-error-states-hover);
             }
 
             &.kbq-disabled {
-                color: kbq-css-variable(icon-button-error-states-disabled);
+                color: var(--kbq-icon-button-error-states-disabled);
             }
         }
 
         &.kbq-success {
-            color: kbq-css-variable(icon-button-success-default);
+            color: var(--kbq-icon-button-success-default);
 
             &:active,
             &.kbq-active {
-                color: kbq-css-variable(icon-button-success-states-active);
+                color: var(--kbq-icon-button-success-states-active);
             }
 
             &:not(.kbq-disabled):hover {
-                color: kbq-css-variable(icon-button-success-states-hover);
+                color: var(--kbq-icon-button-success-states-hover);
             }
 
             &.kbq-disabled {
-                color: kbq-css-variable(icon-button-success-states-disabled);
+                color: var(--kbq-icon-button-success-states-disabled);
             }
         }
 
         &.kbq-warning {
-            color: kbq-css-variable(icon-button-warning-default);
+            color: var(--kbq-icon-button-warning-default);
 
             &:active,
             &.kbq-active {
-                color: kbq-css-variable(icon-button-warning-states-active);
+                color: var(--kbq-icon-button-warning-states-active);
             }
 
             &:not(.kbq-disabled):hover {
-                color: kbq-css-variable(icon-button-warning-states-hover);
+                color: var(--kbq-icon-button-warning-states-hover);
             }
 
             &.kbq-disabled {
-                color: kbq-css-variable(icon-button-warning-states-disabled);
+                color: var(--kbq-icon-button-warning-states-disabled);
             }
         }
 
         &.cdk-keyboard-focused {
             box-shadow:
-                inset 0 0 0.1px 1px kbq-css-variable(states-focused-color),
-                0 0 0.1px 1px kbq-css-variable(states-focused-color);
+                inset 0 0 0.1px 1px var(--kbq-states-focused-color),
+                0 0 0.1px 1px var(--kbq-states-focused-color);
         }
     }
 }

package/icon/_icon-item-theme.scss

@@ -6,8 +6,8 @@
 @mixin kbq-icon-item-style($type, $style-name) {
     $base: icon-item-filled-#{$type}-#{$style-name};
 
-    color: kbq-css-variable(#{$base}-color);
-    background: kbq-css-variable(#{$base}-background);
+    color: var(--kbq-#{$base}-color);
+    background: var(--kbq-#{$base}-background);
 }
 
 @mixin kbq-icon-item-theme() {

package/icon/_icon-theme.scss

@@ -3,27 +3,27 @@
 @mixin kbq-icon-theme() {
     .kbq-icon:not(.kbq-icon-button, .kbq-icon-item) {
         &.kbq-theme {
-            color: kbq-css-variable(icon-theme-color);
+            color: var(--kbq-icon-theme-color);
         }
 
         &.kbq-contrast {
-            color: kbq-css-variable(icon-contrast-color);
+            color: var(--kbq-icon-contrast-color);
         }
 
         &.kbq-contrast-fade {
-            color: kbq-css-variable(icon-fade-contrast-color);
+            color: var(--kbq-icon-fade-contrast-color);
         }
 
         &.kbq-error {
-            color: kbq-css-variable(icon-error-color);
+            color: var(--kbq-icon-error-color);
         }
 
         &.kbq-warning {
-            color: kbq-css-variable(icon-warning-color);
+            color: var(--kbq-icon-warning-color);
         }
 
         &.kbq-success {
-            color: kbq-css-variable(icon-success-color);
+            color: var(--kbq-icon-success-color);
         }
     }
 }

package/icon/icon-button.scss

@@ -10,12 +10,10 @@
         cursor: pointer;
     }
 
-    padding: kbq-css-variable(icon-button-size-normal-vertical-padding)
-        kbq-css-variable(icon-button-size-normal-horizontal-padding);
+    padding: var(--kbq-icon-button-size-normal-vertical-padding) var(--kbq-icon-button-size-normal-horizontal-padding);
 
     &.kbq-icon-button_small {
-        padding: kbq-css-variable(icon-button-size-small-vertical-padding)
-            kbq-css-variable(icon-button-size-small-horizontal-padding);
+        padding: var(--kbq-icon-button-size-small-vertical-padding) var(--kbq-icon-button-size-small-horizontal-padding);
     }
 }
 

package/icon/icon-item.scss

@@ -11,13 +11,11 @@
     border-radius: 50%;
 
     &.kbq-icon-item_normal {
-        padding: kbq-css-variable(icon-item-size-normal-vertical-padding)
-            kbq-css-variable(icon-item-size-normal-horizontal-padding);
+        padding: var(--kbq-icon-item-size-normal-vertical-padding) var(--kbq-icon-item-size-normal-horizontal-padding);
     }
 
     &.kbq-icon-item_big {
-        padding: kbq-css-variable(icon-item-size-big-vertical-padding)
-            kbq-css-variable(icon-item-size-big-horizontal-padding);
+        padding: var(--kbq-icon-item-size-big-vertical-padding) var(--kbq-icon-item-size-big-horizontal-padding);
     }
 }
 

package/input/input.scss

@@ -14,11 +14,11 @@
     width: 100%;
     min-height: kbq-difference-series-css-variables(
         [form-field-size-height,
-        calc(kbq-css-variable(form-field-size-border-width) * 2)]
+        calc(var(--kbq-form-field-size-border-width) * 2)]
     );
 
     padding: kbq-difference-series-css-variables([input-size-padding-vertical, form-field-size-border-width])
-        kbq-css-variable(input-size-padding-horizontal);
+        var(--kbq-input-size-padding-horizontal);
 }
 
 input.kbq-input[type='number'] {

package/link/_link-theme.scss

@@ -8,7 +8,7 @@
     text-decoration: none;
     cursor: pointer;
 
-    outline-offset: kbq-css-variable(link-size-state-focused-outline-offset);
+    outline-offset: var(--kbq-link-size-state-focused-outline-offset);
 
     &:focus {
         outline: none;
@@ -23,22 +23,22 @@
 
     &.kbq-text-with-icon .kbq-link__text {
         &:not(:first-child) {
-            margin-left: kbq-css-variable(link-size-normal-content-padding);
+            margin-left: var(--kbq-link-size-normal-content-padding);
         }
 
         &:not(:last-child) {
-            margin-right: kbq-css-variable(link-size-normal-content-padding);
+            margin-right: var(--kbq-link-size-normal-content-padding);
         }
     }
 
     &.kbq-link_compact {
         &.kbq-text-with-icon .kbq-link__text {
             &:not(:first-child) {
-                margin-left: kbq-css-variable(link-size-compact-content-padding);
+                margin-left: var(--kbq-link-size-compact-content-padding);
             }
 
             &:not(:last-child) {
-                margin-right: kbq-css-variable(link-size-compact-content-padding);
+                margin-right: var(--kbq-link-size-compact-content-padding);
             }
         }
     }
@@ -46,11 +46,11 @@
     &.kbq-link_big {
         &.kbq-text-with-icon .kbq-link__text {
             &:not(:first-child) {
-                margin-left: kbq-css-variable(link-size-big-content-padding);
+                margin-left: var(--kbq-link-size-big-content-padding);
             }
 
             &:not(:last-child) {
-                margin-right: kbq-css-variable(link-size-big-content-padding);
+                margin-right: var(--kbq-link-size-big-content-padding);
             }
         }
     }
@@ -72,16 +72,16 @@
         $base-path: link-#{$state-name};
     }
 
-    color: kbq-css-variable(#{$base-path}-text);
+    color: var(--kbq-#{$base-path}-text);
 
     &.kbq-text-only,
     &.kbq-text-with-icon .kbq-link__text,
     &.kbq-text-with-dot .kbq-link__text {
-        border-bottom-color: kbq-css-variable(#{$base-path}-border-bottom);
+        border-bottom-color: var(--kbq-#{$base-path}-border-bottom);
     }
 
     & .kbq-icon {
-        color: kbq-css-variable(#{$base-path}-text) !important;
+        color: var(--kbq-#{$base-path}-text) !important;
     }
 }
 
@@ -118,7 +118,7 @@
         }
 
         &.cdk-keyboard-focused {
-            outline: kbq-css-variable(link-state-focused-outline) solid;
+            outline: var(--kbq-link-state-focused-outline) solid;
         }
 
         &.kbq-disabled {

package/list/_list-theme.scss

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

package/list/list.scss

@@ -24,7 +24,7 @@
 
     & .kbq-option-action {
         display: none;
-        height: kbq-css-variable(size-xl);
+        height: var(--kbq-size-xl);
         align-items: center;
     }
 

package/loader-overlay/_loader-overlay-theme.scss

@@ -4,29 +4,29 @@
     // FIXME: move to unified mixin if necessary
     .kbq-loader-overlay_filled {
         &.kbq-loader-overlay {
-            background: kbq-css-variable(loader-overlay-filled-overlay-background);
+            background: var(--kbq-loader-overlay-filled-overlay-background);
         }
 
         & .kbq-loader-overlay-text {
-            color: kbq-css-variable(loader-overlay-filled-text-color);
+            color: var(--kbq-loader-overlay-filled-text-color);
         }
 
         & .kbq-loader-overlay-caption {
-            color: kbq-css-variable(loader-overlay-filled-caption-color);
+            color: var(--kbq-loader-overlay-filled-caption-color);
         }
     }
 
     .kbq-loader-overlay_transparent {
         &.kbq-loader-overlay {
-            background: kbq-css-variable(loader-overlay-transparent-overlay-background);
+            background: var(--kbq-loader-overlay-transparent-overlay-background);
         }
 
         & .kbq-loader-overlay-text {
-            color: kbq-css-variable(loader-overlay-transparent-text-color);
+            color: var(--kbq-loader-overlay-transparent-text-color);
         }
 
         & .kbq-loader-overlay-caption {
-            color: kbq-css-variable(loader-overlay-transparent-caption-color);
+            color: var(--kbq-loader-overlay-transparent-caption-color);
         }
     }
 }

package/loader-overlay/loader-overlay.scss

@@ -41,30 +41,30 @@
     }
 
     &.kbq-loader-overlay_big {
-        padding-left: kbq-css-variable(loader-overlay-size-big-overlay-padding-horizontal);
+        padding-left: var(--kbq-loader-overlay-size-big-overlay-padding-horizontal);
 
-        padding-right: kbq-css-variable(loader-overlay-size-big-overlay-padding-horizontal);
+        padding-right: var(--kbq-loader-overlay-size-big-overlay-padding-horizontal);
 
         & .kbq-progress-spinner {
-            margin-bottom: kbq-css-variable(loader-overlay-size-big-loader-margin-bottom);
+            margin-bottom: var(--kbq-loader-overlay-size-big-loader-margin-bottom);
         }
 
         & .kbq-loader-overlay-text {
-            margin-bottom: kbq-css-variable(loader-overlay-size-big-content-content-gap-vertical);
+            margin-bottom: var(--kbq-loader-overlay-size-big-content-content-gap-vertical);
         }
     }
 
     &.kbq-loader-overlay_compact {
-        padding-left: kbq-css-variable(loader-overlay-size-compact-overlay-padding-horizontal);
+        padding-left: var(--kbq-loader-overlay-size-compact-overlay-padding-horizontal);
 
-        padding-right: kbq-css-variable(loader-overlay-size-compact-overlay-padding-horizontal);
+        padding-right: var(--kbq-loader-overlay-size-compact-overlay-padding-horizontal);
 
         & .kbq-progress-spinner {
-            margin-bottom: kbq-css-variable(loader-overlay-size-compact-loader-margin-bottom);
+            margin-bottom: var(--kbq-loader-overlay-size-compact-loader-margin-bottom);
         }
 
         & .kbq-loader-overlay-text {
-            margin-bottom: kbq-css-variable(loader-overlay-size-compact-content-content-gap-vertical);
+            margin-bottom: var(--kbq-loader-overlay-size-compact-content-content-gap-vertical);
         }
     }
 }

package/markdown/_markdown-theme.scss

@@ -4,81 +4,81 @@
 
 @mixin kbq-markdown-theme() {
     .kbq-markdown {
-        color: kbq-css-variable(foreground-contrast);
-        background: kbq-css-variable(background-bg);
+        color: var(--kbq-foreground-contrast);
+        background: var(--kbq-background-bg);
 
         // h1, h2, h3, h4, h5, h6
         @for $i from 1 through 6 {
             .kbq-markdown__h#{$i} {
-                color: kbq-css-variable(markdown-h#{$i}-color);
+                color: var(--kbq-markdown-h#{$i}-color);
             }
         }
 
         .kbq-markdown__p {
-            color: kbq-css-variable(markdown-p-color);
+            color: var(--kbq-markdown-p-color);
         }
 
         .kbq-markdown__ul,
         .kbq-markdown__ol {
-            color: kbq-css-variable(markdown-list-color);
+            color: var(--kbq-markdown-list-color);
         }
 
         .kbq-markdown__blockquote {
-            color: kbq-css-variable(markdown-blockquote-text);
-            background: kbq-css-variable(markdown-blockquote-background);
-            border-color: kbq-css-variable(markdown-blockquote-border);
-            border-left-color: kbq-css-variable(markdown-blockquote-line);
+            color: var(--kbq-markdown-blockquote-text);
+            background: var(--kbq-markdown-blockquote-background);
+            border-color: var(--kbq-markdown-blockquote-border);
+            border-left-color: var(--kbq-markdown-blockquote-line);
         }
 
         .kbq-markdown__pre,
         .kbq-markdown__p > .kbq-markdown__code {
-            color: kbq-css-variable(markdown-code-text);
-            background-color: kbq-css-variable(markdown-code-background);
-            border-color: kbq-css-variable(markdown-code-border);
+            color: var(--kbq-markdown-code-text);
+            background-color: var(--kbq-markdown-code-background);
+            border-color: var(--kbq-markdown-code-border);
         }
 
         .kbq-markdown__a {
-            color: kbq-css-variable(markdown-link-text);
-            border-bottom-color: kbq-css-variable(markdown-link-border-bottom);
+            color: var(--kbq-markdown-link-text);
+            border-bottom-color: var(--kbq-markdown-link-border-bottom);
 
             &:visited {
-                color: kbq-css-variable(markdown-link-state-visited-text);
-                border-bottom-color: kbq-css-variable(markdown-link-state-visited-border-bottom);
+                color: var(--kbq-markdown-link-state-visited-text);
+                border-bottom-color: var(--kbq-markdown-link-state-visited-border-bottom);
             }
 
             &:hover {
-                color: kbq-css-variable(markdown-link-state-hover-text);
+                color: var(--kbq-markdown-link-state-hover-text);
                 transition: color 0ms;
-                border-bottom-color: kbq-css-variable(markdown-link-state-hover-border-bottom);
+                border-bottom-color: var(--kbq-markdown-link-state-hover-border-bottom);
             }
 
             &:active {
-                color: kbq-css-variable(markdown-link-state-active);
+                color: var(--kbq-markdown-link-state-active);
             }
 
             &:focus {
-                outline: kbq-css-variable(markdown-link-state-focused-outline) solid
-                    kbq-css-variable(markdown-link-size-state-focused-outline-width);
+                outline: var(--kbq-markdown-link-state-focused-outline) solid
+                    var(--kbq-markdown-link-size-state-focused-outline-width);
 
-                outline-offset: kbq-css-variable(markdown-link-size-state-focused-outline-offset);
+                outline-offset: var(--kbq-markdown-link-size-state-focused-outline-offset);
             }
         }
 
         .kbq-markdown__img + em {
-            color: kbq-css-variable(markdown-image-caption-text);
+            color: var(--kbq-markdown-image-caption-text);
         }
 
         .kbq-markdown__hr {
-            border-bottom-color: kbq-css-variable(markdown-hr-color);
+            border-bottom-color: var(--kbq-markdown-hr-color);
         }
 
         .kbq-markdown__table > .kbq-markdown__thead {
-            color: kbq-css-variable(markdown-table-header);
-            border-bottom-color: kbq-css-variable(markdown-table-border);
+            color: var(--kbq-markdown-table-header);
+            border-bottom-color: var(--kbq-markdown-table-border);
         }
 
         .kbq-markdown__table > .kbq-markdown__tbody {
-            color: kbq-css-variable(markdown-table-body);
+            color: var(--kbq-markdown-table-body);
         }
     }
 }