fix: style errors (#1654)

lskramarov · web-flow · commit 7d9f3958a20a · 2026-06-29T14:13:57.000+03:00
Co-authored-by: lskramarov &lt;9027254+lskramarov@users.noreply.github.com&gt;
diff --git a/packages/components/accordion/accordion-trigger.component.scss b/packages/components/accordion/accordion-trigger.component.scss
@@ -3,10 +3,6 @@
     flex-direction: row;
     align-items: center;
 
-    background: transparent;
-    border: none;
-    outline: none;
-
     & .kbq-accordion-trigger__icon {
         box-sizing: initial;
 
@@ -28,14 +24,6 @@
         margin-bottom: calc(-1 * #{var(--kbq-size-3xs)});
     }
 
-    &:hover:not([data-disabled='true']) {
-        cursor: pointer;
-
-        & .kbq-accordion-trigger__icon {
-            color: var(--kbq-accordion-item-states-hover-icon-color);
-        }
-    }
-
     &.kbq-accordion-trigger_fill {
         padding: var(--kbq-accordion-size-item-header-variant-fill-padding);
 
@@ -65,12 +53,6 @@
             transform: rotate(-180deg);
         }
     }
-
-    &[data-disabled='true'] {
-        & .kbq-accordion-trigger__icon {
-            color: var(--kbq-accordion-item-states-disabled-icon-color) !important;
-        }
-    }
 }
 
 button.kbq-accordion-trigger {
diff --git a/packages/components/accordion/accordion.component.scss b/packages/components/accordion/accordion.component.scss
@@ -29,14 +29,21 @@
     }
 
     &[data-state='open'] {
-        transition: 300ms ease-out;
+        transition: height 300ms ease-out;
         height: var(--radix-accordion-content-height);
     }
 
     &[data-state='closed'] {
-        transition: 300ms ease-out;
+        transition: height 300ms ease-out;
         height: 0;
     }
+
+    @media (prefers-reduced-motion: reduce) {
+        &[data-state='open'],
+        &[data-state='closed'] {
+            transition: none;
+        }
+    }
 }
 
 @include kbq-accordion-theme();
diff --git a/packages/components/alert/_alert-theme.scss b/packages/components/alert/_alert-theme.scss
@@ -13,10 +13,6 @@
 }
 
 @mixin kbq-alert-theme() {
-    .kbq-alert__close:focus {
-        outline: none;
-    }
-
     .kbq-alert.kbq-alert_default {
         &.kbq-alert_error {
             @include kbq-alert-style(default, error);
diff --git a/packages/components/app-switcher/app-switcher-dropdown-app.scss b/packages/components/app-switcher/app-switcher-dropdown-app.scss
@@ -9,6 +9,8 @@
     min-height: 50px;
 
     border-radius: var(--kbq-size-xs);
+    // base transparent border so the .cdk-keyboard-focused border-color renders a focus ring (matches list-item-base)
+    border: var(--kbq-size-3xs) solid transparent;
 
     @include common.user-select(none);
 
diff --git a/packages/components/core/styles/common/_animation.scss b/packages/components/core/styles/common/_animation.scss
@@ -36,5 +36,9 @@
             repeat;
         background-size: 32px 32px;
         animation: kbq-progress 1s linear infinite;
+
+        @media (prefers-reduced-motion: reduce) {
+            animation: none;
+        }
     }
 }
diff --git a/packages/components/core/styles/theming/_components-theming.scss b/packages/components/core/styles/theming/_components-theming.scss
@@ -641,7 +641,7 @@
             variable-constant-background: map.get($tokens, 'code-block-#{$scheme}-hljs-variable-constant-background'),
             variable-constant-color: map.get($tokens, 'code-block-#{$scheme}-hljs-variable-constant-color'),
             variable-language-background: map.get($tokens, 'code-block-#{$scheme}-hljs-variable-language-background'),
-            variable-language-color: map.get($tokens, 'code-block-#{$scheme}-hljs-variable-language-color') r
+            variable-language-color: map.get($tokens, 'code-block-#{$scheme}-hljs-variable-language-color')
         )
     );
 
diff --git a/packages/components/datepicker/_datepicker-theme.scss b/packages/components/datepicker/_datepicker-theme.scss
@@ -41,7 +41,7 @@
         }
 
         &.kbq-disabled {
-            color: var(--kbq-states-foreground-disabled);
+            color: var(--kbq-datepicker-grid-cell-states-disabled-text);
             background: var(--kbq-datepicker-grid-cell-states-disabled-background);
         }
     }
diff --git a/packages/components/datepicker/datepicker-toggle.scss b/packages/components/datepicker/datepicker-toggle.scss
@@ -12,9 +12,9 @@
 }
 
 .kbq-datepicker-toggle__button.kbq-button-icon {
-    // FIXME: no such tokens in design-tokens, component needs to be reviewed
-    width: var(--kbq-datepicker-toggle-size-width);
-    height: var(--kbq-datepicker-toggle-size-height);
+    // @TODO define --kbq-datepicker-toggle-size-* in design-tokens; fallback matches the icon-button control size meanwhile
+    width: var(--kbq-datepicker-toggle-size-width, var(--kbq-size-3xl));
+    height: var(--kbq-datepicker-toggle-size-height, var(--kbq-size-3xl));
     margin-left: 2px;
 }
 
diff --git a/packages/components/file-upload/file-upload-tokens.scss b/packages/components/file-upload/file-upload-tokens.scss
@@ -83,6 +83,7 @@
     --kbq-file-upload-multiple-states-error-upload-icon-color: var(--kbq-icon-error);
     --kbq-file-upload-multiple-states-error-dropzone-icon-color: var(--kbq-icon-error);
     --kbq-file-upload-multiple-states-error-left-icon-color: var(--kbq-icon-error);
+    --kbq-file-upload-multiple-states-error-icon-button-color: var(--kbq-icon-error);
     --kbq-file-upload-multiple-states-error-text-block-color: var(--kbq-foreground-error);
     --kbq-file-upload-multiple-states-disabled-container-border: var(--kbq-states-line-disabled);
     --kbq-file-upload-multiple-states-disabled-container-background: var(--kbq-states-background-disabled);
diff --git a/packages/components/link/__screenshots__/01-dark.png b/packages/components/link/__screenshots__/01-dark.png
diff --git a/packages/components/link/__screenshots__/01-light.png b/packages/components/link/__screenshots__/01-light.png
diff --git a/packages/components/link/link-tokens.scss b/packages/components/link/link-tokens.scss
@@ -13,9 +13,9 @@
     /* @TODO (#DS-3002) */
     --kbq-link-state-visited-border-bottom: var(--kbq-line-visited-fade, var(--kbq-line-visited));
     --kbq-link-state-visited-hover-text: var(--kbq-states-foreground-visited-hover);
-    --kbq-link-state-visited-hover-border-bottomm: var(--kbq-line-visited-fade, var(--kbq-line-visited));
+    --kbq-link-state-visited-hover-border-bottom: var(--kbq-line-visited-fade, var(--kbq-line-visited));
     --kbq-link-state-visited-active-text: var(--kbq-states-foreground-visited-active);
-    --kbq-link-state-visited-active-border-bottomm: var(--kbq-line-visited-fade, var(--kbq-line-visited));
+    --kbq-link-state-visited-active-border-bottom: var(--kbq-line-visited-fade, var(--kbq-line-visited));
     --kbq-link-state-hover-text: var(--kbq-states-foreground-theme-hover);
     --kbq-link-state-hover-border-bottom: var(--kbq-line-theme-fade);
     --kbq-link-state-active-text: var(--kbq-states-foreground-theme-active);
diff --git a/packages/components/loader-overlay/loader-overlay-tokens.scss b/packages/components/loader-overlay/loader-overlay-tokens.scss
@@ -2,7 +2,7 @@
     --kbq-loader-overlay-size-big-overlay-padding-horizontal: var(--kbq-size-3xl);
     --kbq-loader-overlay-size-big-loader-margin-bottom: var(--kbq-size-xxl);
     --kbq-loader-overlay-size-big-content-content-gap-vertical: var(--kbq-size-l);
-    --kbq-loader-overlay-size-normal-overlay-padding-horizontal: var(--kbq-sizeа-3xl);
+    --kbq-loader-overlay-size-normal-overlay-padding-horizontal: var(--kbq-size-3xl);
     --kbq-loader-overlay-size-normal-loader-margin-bottom: var(--kbq-size-xxl);
     --kbq-loader-overlay-size-normal-content-content-gap-vertical: var(--kbq-size-xxs);
     --kbq-loader-overlay-size-compact-overlay-padding-horizontal: var(--kbq-size-3xl);
diff --git a/packages/components/modal/_modal-animation.scss b/packages/components/modal/_modal-animation.scss
@@ -40,13 +40,13 @@ $animation-duration-base: 0.3s;
 @mixin zoom-motion($className, $keyframeName, $duration: $animation-duration-base) {
     @include _make-motion($className, $keyframeName, $duration);
 
-    .#{className}-enter,
-    .#{className}-appear {
+    .#{$className}-enter,
+    .#{$className}-appear {
         transform: translate(0, -25%);
         animation-timing-function: $ease-out-circ;
     }
 
-    .#{className}-leave {
+    .#{$className}-leave {
         transform: translate(0, 0);
         animation-timing-function: $ease-in-out-circ;
     }
@@ -55,13 +55,13 @@ $animation-duration-base: 0.3s;
 @mixin fade-motion($className, $keyframeName) {
     @include _make-motion($className, $keyframeName);
 
-    .#{className}-enter,
-    .#{className}-appear {
+    .#{$className}-enter,
+    .#{$className}-appear {
         opacity: 0;
         animation-timing-function: ease-out;
     }
 
-    .#{className}-leave {
+    .#{$className}-leave {
         animation-timing-function: ease-out;
     }
 }
diff --git a/packages/components/notification-center/notification-center.scss b/packages/components/notification-center/notification-center.scss
@@ -78,7 +78,8 @@
         display: none;
     }
 
-    &:hover .kbq-notification-center-sub-header__button {
+    &:hover .kbq-notification-center-sub-header__button,
+    &:focus-within .kbq-notification-center-sub-header__button {
         display: flex;
     }
 }
diff --git a/packages/components/notification-center/notification-item.scss b/packages/components/notification-center/notification-item.scss
@@ -13,7 +13,8 @@
     margin-left: var(--kbq-size-m);
     margin-right: var(--kbq-size-m);
 
-    &:hover {
+    &:hover,
+    &:focus-within {
         & .kbq-notification-item-time {
             visibility: hidden;
         }
diff --git a/packages/components/progress-bar/progress-bar.scss b/packages/components/progress-bar/progress-bar.scss
@@ -48,6 +48,10 @@
 
     &.kbq-progress-bar_indeterminate .kbq-progress-bar__line {
         animation: kbq-progress-bar-indeterminate 2.1s timing.$ease-in-out-quad infinite;
+
+        @media (prefers-reduced-motion: reduce) {
+            animation: none;
+        }
     }
 }
 
diff --git a/packages/components/progress-spinner/progress-spinner.scss b/packages/components/progress-spinner/progress-spinner.scss
@@ -18,7 +18,7 @@
 
 .kbq-progress-spinner__circle {
     fill: none;
-    stroke: black;
+    stroke: var(--stroke, var(--kbq-progress-spinner-circle-background));
     stroke-dasharray: 295%;
     stroke-width: 13%;
     transition: stroke-dashoffset 0.3s;
@@ -65,6 +65,10 @@
 .kbq-progress-spinner_indeterminate .kbq-progress-spinner__inner {
     animation: kbq-progress-spinner-indeterminate 1.5s timing.$ease-in-out-quad infinite;
 
+    @media (prefers-reduced-motion: reduce) {
+        animation: none;
+    }
+
     // TODO: rework this place
     .kbq-progress-spinner__circle {
         stroke-dashoffset: 80%;
diff --git a/packages/components/skeleton/skeleton.scss b/packages/components/skeleton/skeleton.scss
@@ -52,5 +52,9 @@
             var(--kbq-skeleton-animation-wave-end) 100%
         );
         animation: wave var(--kbq-skeleton-animation-duration) ease-in var(--kbq-skeleton-animation-delay) infinite;
+
+        @media (prefers-reduced-motion: reduce) {
+            animation: none;
+        }
     }
 }
diff --git a/packages/components/split-button/__screenshots__/01-light.png b/packages/components/split-button/__screenshots__/01-light.png
diff --git a/packages/components/split-button/__screenshots__/02-light.png b/packages/components/split-button/__screenshots__/02-light.png
diff --git a/packages/components/split-button/__screenshots__/03-dark.png b/packages/components/split-button/__screenshots__/03-dark.png
diff --git a/packages/components/split-button/__screenshots__/03-light.png b/packages/components/split-button/__screenshots__/03-light.png
diff --git a/packages/components/split-button/_split-button-theme.scss b/packages/components/split-button/_split-button-theme.scss
@@ -1,7 +1,7 @@
 @mixin kbq-split-button-theme() {
     .kbq-split-button {
         &:hover:has(.kbq-button_transparent) {
-            background: var(--kbq-states-background-transparent-hover, rgba(108, 115, 147, 0.08));
+            background: var(--kbq-states-background-transparent-hover);
         }
 
         & .kbq-split-button_item {
@@ -102,7 +102,7 @@
             }
 
             & .kbq-split-button_second:before {
-                background: rgba(138, 143, 168, 0.6);
+                background: var(--kbq-states-line-disabled);
             }
         }
 
diff --git a/packages/components/splitter/_splitter-theme.scss b/packages/components/splitter/_splitter-theme.scss
@@ -6,7 +6,7 @@
 
         &:hover,
         &.kbq-gutter_dragged {
-            background-color: rgba(106, 115, 150, 0.08);
+            background-color: var(--kbq-states-background-transparent-hover);
         }
 
         &.kbq-gutter_vertical {
@@ -21,6 +21,6 @@
     }
 
     .kbq-gutter-ghost {
-        background: rgba(106, 115, 150, 0.16);
+        background: var(--kbq-states-background-transparent-active);
     }
 }
diff --git a/packages/components/time-range/time-range.scss b/packages/components/time-range/time-range.scss
@@ -33,14 +33,6 @@
         flex-direction: column;
         gap: var(--kbq-size-s);
 
-        .kbq-time-range-editor__predefined {
-            column-count: 2;
-
-            .kbq-time-range-editor__predefined-option {
-                display: block;
-            }
-        }
-
         .kbq-time-range-editor__date-time {
             display: flex;
             flex-direction: row;
diff --git a/packages/components/timepicker/timepicker.scss b/packages/components/timepicker/timepicker.scss
@@ -1,8 +1,8 @@
 @use '../core/styles/common/tokens' as *;
 
 .kbq-timepicker {
-    // FIXME: default token doesn't exist
-    padding-right: var(--kbq-timepicker-size-padding-right);
+    // @TODO define --kbq-timepicker-size-padding-right in design-tokens; fallback keeps spacing meanwhile
+    padding-right: var(--kbq-timepicker-size-padding-right, var(--kbq-size-s));
 }
 
 .kbq-form-field-type-timepicker {
diff --git a/packages/components/tree-select/_tree-select-theme.scss b/packages/components/tree-select/_tree-select-theme.scss
@@ -9,7 +9,7 @@
         &.kbq-control_has-validate-directive.ng-invalid,
         // Invalid by control `ErrorStateMatcher`
         &.kbq-invalid {
-            color: var(--kbq-error-default);
+            color: var(--kbq-foreground-error);
 
             .kbq-select__placeholder {
                 color: var(--kbq-form-field-states-error-placeholder);
diff --git a/packages/components/tree/__screenshots__/02-dark.png b/packages/components/tree/__screenshots__/02-dark.png
diff --git a/packages/components/tree/__screenshots__/02-light.png b/packages/components/tree/__screenshots__/02-light.png
diff --git a/packages/components/tree/_tree-theme.scss b/packages/components/tree/_tree-theme.scss
@@ -91,7 +91,7 @@
         @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 
-    .kbq-tree-option-caption {
+    .kbq-option-caption {
         @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
     }
 }
diff --git a/packages/components/tree/toggle.scss b/packages/components/tree/toggle.scss
@@ -9,6 +9,7 @@
     flex-shrink: 0;
 
     height: 100%;
+
     // FIXME: default token doesn't exist
     padding-left: var(--kbq-tree-size-toggle-padding);
     padding-right: var(--kbq-tree-size-toggle-padding);

Original file line number	Diff line number	Diff line change
`@@ -29,14 +29,21 @@`
`29`	`29`	`}`
`30`	`30`
`31`	`31`	`&[data-state='open'] {`
`32`		`- transition: 300ms ease-out;`
	`32`	`+ transition: height 300ms ease-out;`
`33`	`33`	`height: var(--radix-accordion-content-height);`
`34`	`34`	`}`
`35`	`35`
`36`	`36`	`&[data-state='closed'] {`
`37`		`- transition: 300ms ease-out;`
	`37`	`+ transition: height 300ms ease-out;`
`38`	`38`	`height: 0;`
`39`	`39`	`}`
	`40`	`+`
	`41`	`+ @media (prefers-reduced-motion: reduce) {`
	`42`	`+ &[data-state='open'],`
	`43`	`+ &[data-state='closed'] {`
	`44`	`+ transition: none;`
	`45`	`+ }`
	`46`	`+ }`
`40`	`47`	`}`
`41`	`48`
`42`	`49`	`@include kbq-accordion-theme();`
Original file line number	Diff line number	Diff line change
`@@ -36,5 +36,9 @@`
`36`	`36`	`repeat;`
`37`	`37`	`background-size: 32px 32px;`
`38`	`38`	`animation: kbq-progress 1s linear infinite;`
	`39`	`+`
	`40`	`+ @media (prefers-reduced-motion: reduce) {`
	`41`	`+ animation: none;`
	`42`	`+ }`
`39`	`43`	`}`
`40`	`44`	`}`
Original file line number	Diff line number	Diff line change
`@@ -641,7 +641,7 @@`
`641`	`641`	`variable-constant-background: map.get($tokens, 'code-block-#{$scheme}-hljs-variable-constant-background'),`
`642`	`642`	`variable-constant-color: map.get($tokens, 'code-block-#{$scheme}-hljs-variable-constant-color'),`
`643`	`643`	`variable-language-background: map.get($tokens, 'code-block-#{$scheme}-hljs-variable-language-background'),`
`644`		`- variable-language-color: map.get($tokens, 'code-block-#{$scheme}-hljs-variable-language-color') r`
	`644`	`+ variable-language-color: map.get($tokens, 'code-block-#{$scheme}-hljs-variable-language-color')`
`645`	`645`	`)`
`646`	`646`	`);`
`647`	`647`
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@`
`41`	`41`	`}`
`42`	`42`
`43`	`43`	`&.kbq-disabled {`
`44`		`- color: var(--kbq-states-foreground-disabled);`
	`44`	`+ color: var(--kbq-datepicker-grid-cell-states-disabled-text);`
`45`	`45`	`background: var(--kbq-datepicker-grid-cell-states-disabled-background);`
`46`	`46`	`}`
`47`	`47`	`}`
Original file line number	Diff line number	Diff line change
`@@ -12,9 +12,9 @@`
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`.kbq-datepicker-toggle__button.kbq-button-icon {`
`15`		`- // FIXME: no such tokens in design-tokens, component needs to be reviewed`
`16`		`- width: var(--kbq-datepicker-toggle-size-width);`
`17`		`- height: var(--kbq-datepicker-toggle-size-height);`
	`15`	`+ // @TODO define --kbq-datepicker-toggle-size-* in design-tokens; fallback matches the icon-button control size meanwhile`
	`16`	`+ width: var(--kbq-datepicker-toggle-size-width, var(--kbq-size-3xl));`
	`17`	`+ height: var(--kbq-datepicker-toggle-size-height, var(--kbq-size-3xl));`
`18`	`18`	`margin-left: 2px;`
`19`	`19`	`}`
`20`	`20`