fix: style errors

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 {

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

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

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

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;
+        }
     }
 }

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

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

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

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

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

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

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

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

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

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;
+        }
     }
 }
 

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

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;
+        }
     }
 }

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

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

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;

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 {

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

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

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