@koobiq/components 18.5.2 → 18.6.0

package/accordion/_accordion-theme.scss

@@ -45,14 +45,14 @@
 @mixin kbq-accordion-typography() {
     .kbq-accordion-header,
     .kbq-accordion-trigger {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-big);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-big);
     }
 
     .kbq-accordion-trigger__caption {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-compact);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
     }
 
     .kbq-accordion-content {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 }

package/alert/_alert-theme.scss

@@ -64,14 +64,14 @@
 
 @mixin kbq-alert-typography() {
     .kbq-alert {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
 
         .kbq-alert__title {
-            @include kbq-typography-level-to-styles_css-variables(typography, subheading);
+            @include kbq-typography-level-to-styles-css-variables(typography, subheading);
         }
 
         &.kbq-alert_compact .kbq-alert__title {
-            @include kbq-typography-level-to-styles_css-variables(typography, text-big-strong);
+            @include kbq-typography-level-to-styles-css-variables(typography, text-big-strong);
         }
     }
 }

package/badge/_badge-theme.scss

@@ -43,6 +43,10 @@
             @include kbq-badge-style(filled, fade-on, error);
         }
 
+        &.kbq-badge_contrast {
+            @include kbq-badge-style(filled, fade-off, contrast);
+        }
+
         &.kbq-badge_theme {
             @include kbq-badge-style(filled, fade-off, theme);
         }
@@ -85,18 +89,18 @@
 
 @mixin kbq-badge-typography() {
     .kbq-badge {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal-medium);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
 
         & .kbq-badge-caption {
-            @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+            @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
     }
 
     .kbq-badge_compact {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-compact-medium);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-compact-medium);
 
         & .kbq-badge-caption {
-            @include kbq-typography-level-to-styles_css-variables(typography, text-compact);
+            @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
         }
     }
 }

package/badge/badge-tokens.scss

@@ -25,6 +25,10 @@
 }
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-badge-filled-fade-off-contrast-background: var(--kbq-background-contrast);
+    --kbq-badge-filled-fade-off-contrast-color: var(--kbq-foreground-on-contrast);
+    --kbq-badge-filled-fade-off-contrast-caption: var(--kbq-foreground-on-contrast);
+    --kbq-badge-filled-fade-off-contrast-icon: var(--kbq-icon-on-contrast);
     --kbq-badge-filled-fade-off-theme-background: var(--kbq-background-theme);
     --kbq-badge-filled-fade-off-theme-color: var(--kbq-foreground-white);
     --kbq-badge-filled-fade-off-theme-caption: var(--kbq-foreground-white);
@@ -89,6 +93,10 @@
 }
 
 :where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-badge-filled-fade-off-contrast-background: var(--kbq-background-contrast);
+    --kbq-badge-filled-fade-off-contrast-color: var(--kbq-foreground-on-contrast);
+    --kbq-badge-filled-fade-off-contrast-caption: var(--kbq-foreground-on-contrast);
+    --kbq-badge-filled-fade-off-contrast-icon: var(--kbq-icon-on-contrast);
     --kbq-badge-filled-fade-off-theme-background: var(--kbq-background-theme);
     --kbq-badge-filled-fade-off-theme-color: var(--kbq-foreground-white);
     --kbq-badge-filled-fade-off-theme-caption: var(--kbq-foreground-white);

package/badge/badge.component.d.ts

@@ -7,6 +7,7 @@ export declare enum KbqBadgeColors {
     FadeSuccess = "fade-success",
     FadeWarning = "fade-warning",
     FadeError = "fade-error",
+    Contrast = "contrast",
     Theme = "theme",
     Success = "success",
     Warning = "warning",

package/button/_button-theme.scss

@@ -87,7 +87,7 @@
         &.kbq-button_outline,
         &.kbq-button_transparent {
             &.cdk-keyboard-focused {
-                $focused-color: var(--kbq-states-focused-color);
+                $focused-color: var(--kbq-states-line-focus-theme);
                 outline: 1px solid $focused-color;
                 border-color: $focused-color;
             }
@@ -98,7 +98,7 @@
 @mixin kbq-button-typography() {
     .kbq-button,
     .kbq-button-icon {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal-medium);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
     }
 
     .kbq-button-icon.kbq-button-wrapper {

package/button/button-tokens.scss

@@ -1,9 +1,3 @@
-.kbq-button-icon {
-    --kbq-button-icon-size-horizontal-padding: var(--kbq-size-s);
-    --kbq-button-icon-size-vertical-padding: var(--kbq-size-s);
-    --kbq-button-icon-size-content-padding: var(--kbq-size-xxs);
-}
-
 .kbq-button,
 .kbq-button-icon {
     --kbq-button-size-height: var(--kbq-size-3xl);
@@ -11,6 +5,9 @@
     --kbq-button-size-border-radius: var(--kbq-size-border-radius);
     --kbq-button-size-horizontal-padding: var(--kbq-size-m);
     --kbq-button-size-content-padding: var(--kbq-size-xs);
+    --kbq-button-icon-size-horizontal-padding: var(--kbq-size-s);
+    --kbq-button-icon-size-vertical-padding: var(--kbq-size-s);
+    --kbq-button-icon-size-content-padding: var(--kbq-size-xxs);
 }
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {

package/button/button.scss

@@ -7,16 +7,22 @@
 .kbq-button {
     @extend %kbq-button-base;
 
-    // base padding + compensation (4px) - border-width (2px)
-    padding-left: kbq-sum-series-css-variables([button-size-horizontal-padding, 4px]);
-    padding-right: kbq-sum-series-css-variables([button-size-horizontal-padding, 4px]);
+    // base padding - border-width
+    padding-left: kbq-difference-series-css-variables([button-size-horizontal-padding, button-size-border-width]);
+    padding-right: kbq-difference-series-css-variables([button-size-horizontal-padding, button-size-border-width]);
 
     &.kbq-button-icon_left {
-        padding-left: var(--kbq-button-size-horizontal-padding);
+        padding-left: kbq-difference-series-css-variables(
+            [button-icon-size-horizontal-padding,
+            button-size-border-width]
+        );
     }
 
     &.kbq-button-icon_right {
-        padding-right: var(--kbq-button-size-horizontal-padding);
+        padding-right: kbq-difference-series-css-variables(
+            [button-icon-size-horizontal-padding,
+            button-size-border-width]
+        );
     }
 }
 
@@ -27,9 +33,8 @@
 .kbq-button-icon {
     @extend %kbq-button-base;
 
-    padding-left: var(--kbq-button-icon-size-horizontal-padding);
-
-    padding-right: var(--kbq-button-icon-size-horizontal-padding);
+    padding-left: kbq-difference-series-css-variables([button-icon-size-horizontal-padding, button-size-border-width]);
+    padding-right: kbq-difference-series-css-variables([button-icon-size-horizontal-padding, button-size-border-width]);
 }
 
 .kbq-button-overlay {

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

@@ -57,6 +57,6 @@
 
 @mixin kbq-button-toggle-typography() {
     .kbq-button-toggle .kbq-button-toggle-wrapper {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal-medium);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
     }
 }

package/checkbox/_checkbox-theme.scss

@@ -98,18 +98,18 @@
 
 @mixin kbq-checkbox-typography() {
     .kbq-checkbox {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
 
         & .kbq-hint .kbq-hint__text {
-            @include kbq-typography-level-to-styles_css-variables(typography, text-compact);
+            @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
         }
     }
 
     .kbq-checkbox.kbq-checkbox_big {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-big);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-big);
 
         & .kbq-hint .kbq-hint__text {
-            @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+            @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
     }
 }

package/checkbox/checkbox-tokens.scss

@@ -15,7 +15,7 @@
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {
     --kbq-checkbox-theme-default-border: var(--kbq-line-contrast-fade);
-    --kbq-checkbox-theme-default-color: var(--kbq-neutral-white);
+    --kbq-checkbox-theme-default-color: var(--kbq-icon-white);
     --kbq-checkbox-theme-default-text: var(--kbq-foreground-contrast);
     --kbq-checkbox-theme-default-background: var(--kbq-background-bg);
     --kbq-checkbox-theme-default-caption: var(--kbq-foreground-contrast-secondary);
@@ -37,7 +37,7 @@
     --kbq-checkbox-theme-states-disabled-background: var(--kbq-states-background-disabled);
     --kbq-checkbox-theme-states-disabled-caption: var(--kbq-states-icon-disabled);
     --kbq-checkbox-error-default-border: var(--kbq-line-error);
-    --kbq-checkbox-error-default-color: var(--kbq-neutral-white);
+    --kbq-checkbox-error-default-color: var(--kbq-icon-white);
     --kbq-checkbox-error-default-text: var(--kbq-foreground-contrast);
     --kbq-checkbox-error-default-background: var(--kbq-states-background-error-less);
     --kbq-checkbox-error-default-caption: var(--kbq-foreground-contrast-secondary);
@@ -62,7 +62,7 @@
 
 :where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
     --kbq-checkbox-theme-default-border: var(--kbq-line-contrast-fade);
-    --kbq-checkbox-theme-default-color: var(--kbq-neutral-white);
+    --kbq-checkbox-theme-default-color: var(--kbq-icon-white);
     --kbq-checkbox-theme-default-text: var(--kbq-foreground-contrast);
     --kbq-checkbox-theme-default-background: var(--kbq-background-bg);
     --kbq-checkbox-theme-default-caption: var(--kbq-foreground-contrast-secondary);
@@ -84,7 +84,7 @@
     --kbq-checkbox-theme-states-disabled-background: var(--kbq-states-background-disabled);
     --kbq-checkbox-theme-states-disabled-caption: var(--kbq-states-icon-disabled);
     --kbq-checkbox-error-default-border: var(--kbq-line-error);
-    --kbq-checkbox-error-default-color: var(--kbq-neutral-white);
+    --kbq-checkbox-error-default-color: var(--kbq-icon-white);
     --kbq-checkbox-error-default-text: var(--kbq-foreground-contrast);
     --kbq-checkbox-error-default-background: var(--kbq-states-background-error-less);
     --kbq-checkbox-error-default-caption: var(--kbq-foreground-contrast-secondary);

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

@@ -346,12 +346,12 @@
         .kbq-tab-group.kbq-focused {
             // paint focus border from the top since because of border constraints
             .kbq-tab-header {
-                box-shadow: 0 2px 0 -1px var(--kbq-states-focused-color);
+                box-shadow: 0 2px 0 -1px var(--kbq-states-line-focus-theme);
             }
 
             .kbq-tab-body__wrapper {
-                border-color: var(--kbq-states-focused-color);
-                box-shadow: inset 0 0 0.1 1px var(--kbq-states-focused-color);
+                border-color: var(--kbq-states-line-focus-theme);
+                box-shadow: inset 0 0 0.1 1px var(--kbq-states-line-focus-theme);
             }
         }
     }
@@ -359,7 +359,7 @@
 
 @mixin kbq-code-block-typography() {
     .kbq-code-block {
-        @include kbq-typography-level-to-styles_css-variables(typography, mono-codeblock);
+        @include kbq-typography-level-to-styles-css-variables(typography, mono-codeblock);
 
         & .kbq-code-block__code {
             font: inherit;

package/core/forms/_forms-theme.scss

@@ -17,6 +17,6 @@
 
 @mixin kbq-forms-typography() {
     .kbq-form__label {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 }

package/core/option/_optgroup-theme.scss

@@ -6,12 +6,12 @@
     }
 
     .kbq-disabled .kbq-optgroup-label {
-        color: var(--kbq-foreground-text-disabled);
+        color: var(--kbq-states-foreground-disabled);
     }
 }
 
 @mixin kbq-optgroup-typography() {
     .kbq-optgroup-label {
-        @include kbq-typography-level-to-styles_css-variables(typography, subheading);
+        @include kbq-typography-level-to-styles-css-variables(typography, subheading);
     }
 }

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

@@ -3,7 +3,7 @@
 @mixin kbq-option-action-theme() {
     .kbq-option-action {
         &.cdk-keyboard-focused {
-            border-color: var(--kbq-states-focused-color);
+            border-color: var(--kbq-states-line-focus-theme);
         }
 
         &:active,

package/core/option/_option-theme.scss

@@ -45,10 +45,10 @@
 
 @mixin kbq-option-typography() {
     .kbq-option {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 
     .kbq-list-option-caption {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-compact);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
     }
 }

package/core/selection/pseudo-checkbox/pseudo-checkbox-tokens.scss

@@ -15,7 +15,7 @@
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {
     --kbq-checkbox-theme-default-border: var(--kbq-line-contrast-fade);
-    --kbq-checkbox-theme-default-color: var(--kbq-neutral-white);
+    --kbq-checkbox-theme-default-color: var(--kbq-icon-white);
     --kbq-checkbox-theme-default-text: var(--kbq-foreground-contrast);
     --kbq-checkbox-theme-default-background: var(--kbq-background-bg);
     --kbq-checkbox-theme-default-caption: var(--kbq-foreground-contrast-secondary);
@@ -37,7 +37,7 @@
     --kbq-checkbox-theme-states-disabled-background: var(--kbq-states-background-disabled);
     --kbq-checkbox-theme-states-disabled-caption: var(--kbq-states-icon-disabled);
     --kbq-checkbox-error-default-border: var(--kbq-line-error);
-    --kbq-checkbox-error-default-color: var(--kbq-neutral-white);
+    --kbq-checkbox-error-default-color: var(--kbq-icon-white);
     --kbq-checkbox-error-default-text: var(--kbq-foreground-contrast);
     --kbq-checkbox-error-default-background: var(--kbq-states-background-error-less);
     --kbq-checkbox-error-default-caption: var(--kbq-foreground-contrast-secondary);
@@ -62,7 +62,7 @@
 
 :where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
     --kbq-checkbox-theme-default-border: var(--kbq-line-contrast-fade);
-    --kbq-checkbox-theme-default-color: var(--kbq-neutral-white);
+    --kbq-checkbox-theme-default-color: var(--kbq-icon-white);
     --kbq-checkbox-theme-default-text: var(--kbq-foreground-contrast);
     --kbq-checkbox-theme-default-background: var(--kbq-background-bg);
     --kbq-checkbox-theme-default-caption: var(--kbq-foreground-contrast-secondary);
@@ -84,7 +84,7 @@
     --kbq-checkbox-theme-states-disabled-background: var(--kbq-states-background-disabled);
     --kbq-checkbox-theme-states-disabled-caption: var(--kbq-states-icon-disabled);
     --kbq-checkbox-error-default-border: var(--kbq-line-error);
-    --kbq-checkbox-error-default-color: var(--kbq-neutral-white);
+    --kbq-checkbox-error-default-color: var(--kbq-icon-white);
     --kbq-checkbox-error-default-text: var(--kbq-foreground-contrast);
     --kbq-checkbox-error-default-background: var(--kbq-states-background-error-less);
     --kbq-checkbox-error-default-caption: var(--kbq-foreground-contrast-secondary);

package/core/styles/theming/_theming.scss

@@ -75,16 +75,7 @@
         error-tertiary: map.get($tokens, '#{$scheme}-foreground-error-tertiary'),
         visited: map.get($tokens, '#{$scheme}-foreground-visited'),
         // будет удалено, после удаления из компонентов ↓
-        error-less: map.get($tokens, '#{$scheme}-foreground-error-less'),
-        // будет удалено, после удаления из компонентов ↓
-        text: map.get($tokens, '#{$scheme}-foreground-text'),
-        text-less-contrast: map.get($tokens, '#{$scheme}-foreground-text-less-contrast'),
-        text-disabled: map.get($tokens, '#{$scheme}-foreground-text-disabled'),
-        text-error: map.get($tokens, '#{$scheme}-foreground-text-error'),
-        text-success: map.get($tokens, '#{$scheme}-foreground-text-success'),
-        divider: map.get($tokens, '#{$scheme}-foreground-divider'),
-        border: map.get($tokens, '#{$scheme}-foreground-border'),
-        icon: map.get($tokens, '#{$scheme}-foreground-icon')
+        error-less: map.get($tokens, '#{$scheme}-foreground-error-less')
     );
 }
 
@@ -107,16 +98,8 @@
         warning: map.get($tokens, '#{$scheme}-background-warning'),
         warning-fade: map.get($tokens, '#{$scheme}-background-warning-fade'),
         transparent: map.get($tokens, '#{$scheme}-background-transparent'),
-        // будет удалено, после удаления из компонентов ↓
-        background: map.get($tokens, '#{$scheme}-background-background'),
-        background-disabled: map.get($tokens, '#{$scheme}-background-background-disabled'),
-        background-less-contrast: map.get($tokens, '#{$scheme}-background-background-less-contrast'),
-        background-under: map.get($tokens, '#{$scheme}-background-background-under'),
         overlay: map.get($tokens, '#{$scheme}-background-overlay'),
-        overlay-inverse: map.get($tokens, '#{$scheme}-background-overlay-inverse'),
-        overlay-hover: map.get($tokens, '#{$scheme}-background-overlay-hover'),
-        overlay-active: map.get($tokens, '#{$scheme}-background-overlay-active'),
-        overlay-disabled: map.get($tokens, '#{$scheme}-background-overlay-disabled')
+        overlay-inverse: map.get($tokens, '#{$scheme}-background-overlay-inverse')
     );
 }
 
@@ -213,22 +196,13 @@
     );
 }
 
-@function _theme_states-others($tokens, $scheme) {
-    @return (brand: map.get($tokens, '#{$scheme}-states-others-brand'));
-}
-
 @function _theme_states($tokens, $scheme) {
     @return (
         background: _theme_states-background($tokens, $scheme),
         foreground: _theme_states-foreground($tokens, $scheme),
         icon: _theme_states-icon($tokens, $scheme),
         line: _theme_states-line($tokens, $scheme),
-        others: _theme_states-others($tokens, $scheme),
         // будет удалено, после удаления из компонентов ↓
-        focused-color: map.get($tokens, '#{$scheme}-states-focused-color'),
-        focused-color-error: map.get($tokens, '#{$scheme}-states-focused-color-error'),
-        selected-color: map.get($tokens, '#{$scheme}-states-selected-color'),
-        pressed-shadow: map.get($tokens, '#{$scheme}-states-pressed-shadow'),
         disabled-opacity: map.get($tokens, '#{$scheme}-states-disabled-opacity')
     );
 }
@@ -249,10 +223,6 @@
     );
 }
 
-@function _theme_palette_neutral($tokens, $scheme) {
-    @return (white: map.get($tokens, '#{$scheme}-neutral-white'), black: map.get($tokens, '#{$scheme}-neutral-black'));
-}
-
 @function kbq-light-theme($tokens) {
     $scheme: 'light';
 
@@ -269,14 +239,9 @@
         warning: _theme_palette($tokens, $scheme, warning),
         error: _theme_palette($tokens, $scheme, error),
         contrast: _theme_palette($tokens, $scheme, contrast),
-        neutral: _theme_palette_neutral($tokens, $scheme),
         white: _theme_palette($tokens, $scheme, white),
         black: _theme_palette($tokens, $scheme, black),
-        brand: _theme_palette($tokens, $scheme, brand),
         purple: _theme_palette($tokens, $scheme, purple),
-        // будет удалено, после удаления из компонентов ↓
-        info: _theme_palette($tokens, $scheme, info),
-        // будет удалено, после удаления из компонентов ↑
         components: kbq-components-theme($tokens, $scheme),
         tokens: $tokens
     );
@@ -298,14 +263,9 @@
         warning: _theme_palette($tokens, $scheme, warning),
         error: _theme_palette($tokens, $scheme, error),
         contrast: _theme_palette($tokens, $scheme, contrast),
-        neutral: _theme_palette_neutral($tokens, $scheme),
         white: _theme_palette($tokens, $scheme, white),
         black: _theme_palette($tokens, $scheme, black),
-        brand: _theme_palette($tokens, $scheme, brand),
         purple: _theme_palette($tokens, $scheme, purple),
-        // будет удалено, после удаления из компонентов ↓
-        info: _theme_palette($tokens, $scheme, info),
-        // будет удалено, после удаления из компонентов ↑
         components: kbq-components-theme($tokens, $scheme),
         tokens: $tokens
     );