diff --git a/packages/components/actions-panel/__screenshots__/2-dark.png b/packages/components/actions-panel/__screenshots__/2-dark.png index b95bb13a31..ca01d75dba 100644 Binary files a/packages/components/actions-panel/__screenshots__/2-dark.png and b/packages/components/actions-panel/__screenshots__/2-dark.png differ diff --git a/packages/components/actions-panel/__screenshots__/2-light.png b/packages/components/actions-panel/__screenshots__/2-light.png index 0fcef5c2d4..2f40bab3a4 100644 Binary files a/packages/components/actions-panel/__screenshots__/2-light.png and b/packages/components/actions-panel/__screenshots__/2-light.png differ diff --git a/packages/components/autocomplete/__screenshots__/01-dark.png b/packages/components/autocomplete/__screenshots__/01-dark.png index e26da23ffb..ca6b667ca2 100644 Binary files a/packages/components/autocomplete/__screenshots__/01-dark.png and b/packages/components/autocomplete/__screenshots__/01-dark.png differ diff --git a/packages/components/autocomplete/__screenshots__/01-light.png b/packages/components/autocomplete/__screenshots__/01-light.png index 0b4157fe7b..30dbc0e665 100644 Binary files a/packages/components/autocomplete/__screenshots__/01-light.png and b/packages/components/autocomplete/__screenshots__/01-light.png differ diff --git a/packages/components/core/option/_option-theme.scss b/packages/components/core/option/_option-theme.scss index a87ac1e03d..ba3b6c137c 100644 --- a/packages/components/core/option/_option-theme.scss +++ b/packages/components/core/option/_option-theme.scss @@ -20,16 +20,14 @@ .kbq-option { @include kbq-option(default); - &.kbq-hovered:not(.kbq-disabled), - &:hover:not(.kbq-disabled) { + &.kbq-active:not(.kbq-disabled) { @include kbq-option(states-hover); } &.kbq-selected:not(.kbq-disabled) { @include kbq-option(states-selected); - &.kbq-hovered, - &:hover { + &.kbq-active { @include kbq-option(states-selected-hover); } } @@ -38,12 +36,12 @@ @include kbq-option(states-disabled); } - &:is(.kbq-selected, .kbq-focused):has(+ :is(.kbq-selected, .kbq-focused)) { + &:is(.kbq-selected, .kbq-active):has(+ :is(.kbq-selected, .kbq-active)) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } - &:is(.kbq-selected, .kbq-focused) + :is(.kbq-selected, .kbq-focused) { + &:is(.kbq-selected, .kbq-active) + :is(.kbq-selected, .kbq-active) { border-top-left-radius: 0; border-top-right-radius: 0; } @@ -53,18 +51,11 @@ &.kbq-selected:not(.kbq-disabled) { @include kbq-option(multiple-states-selected); - &.kbq-hovered, - &:hover { + &.kbq-active { @include kbq-option(multiple-states-selected-hover); } } } - - .cdk-keyboard-focused { - .kbq-option.kbq-active { - border-color: var(--kbq-list-states-focused-focus-outline-color); - } - } } @mixin kbq-option-typography() { diff --git a/packages/components/dropdown/_dropdown-theme.scss b/packages/components/dropdown/_dropdown-theme.scss index f9b117018d..bfdcfb944e 100644 --- a/packages/components/dropdown/_dropdown-theme.scss +++ b/packages/components/dropdown/_dropdown-theme.scss @@ -23,18 +23,14 @@ } &.kbq-dropdown-item_highlighted, - &:hover:not(.kbq-disabled) { + &.cdk-focused:not(.kbq-disabled) { @include _kbq-dropdown-item-state(states-hover); } - &.cdk-keyboard-focused { - border-color: var(--kbq-list-states-focused-focus-outline-color); - } - &.kbq-selected { @include _kbq-dropdown-item-state(states-selected); - &:hover:not(.kbq-disabled) { + &.cdk-focused:not(.kbq-disabled) { @include _kbq-dropdown-item-state(states-selected-hover); } } @@ -43,12 +39,12 @@ @include _kbq-dropdown-item-state(states-disabled); } - &:is(.kbq-selected, .cdk-keyboard-focused):has(+ :is(.kbq-selected, .cdk-keyboard-focused)) { + &:is(.kbq-selected, .cdk-focused):has(+ :is(.kbq-selected, .cdk-focused)) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } - &:is(.kbq-selected, .cdk-keyboard-focused) + :is(.kbq-selected, .cdk-keyboard-focused) { + &:is(.kbq-selected, .cdk-focused) + :is(.kbq-selected, .cdk-focused) { border-top-left-radius: 0; border-top-right-radius: 0; } diff --git a/packages/components/icon/__screenshots__/02-light.png b/packages/components/icon/__screenshots__/02-light.png index ee5afbb1ff..c60d36a3a7 100644 Binary files a/packages/components/icon/__screenshots__/02-light.png and b/packages/components/icon/__screenshots__/02-light.png differ diff --git a/packages/components/select/__screenshots__/01-dark.png b/packages/components/select/__screenshots__/01-dark.png index 066f48d0a2..da3bd70ff6 100644 Binary files a/packages/components/select/__screenshots__/01-dark.png and b/packages/components/select/__screenshots__/01-dark.png differ diff --git a/packages/components/select/__screenshots__/01-light.png b/packages/components/select/__screenshots__/01-light.png index 8f3d11d65e..16e807cc1f 100644 Binary files a/packages/components/select/__screenshots__/01-light.png and b/packages/components/select/__screenshots__/01-light.png differ diff --git a/packages/components/select/__screenshots__/02-dark.png b/packages/components/select/__screenshots__/02-dark.png index 36b4b40a6e..86ecfc7d1a 100644 Binary files a/packages/components/select/__screenshots__/02-dark.png and b/packages/components/select/__screenshots__/02-dark.png differ diff --git a/packages/components/select/__screenshots__/02-light.png b/packages/components/select/__screenshots__/02-light.png index 6ef5618c1e..c13f0ebdeb 100644 Binary files a/packages/components/select/__screenshots__/02-light.png and b/packages/components/select/__screenshots__/02-light.png differ diff --git a/packages/components/select/__screenshots__/03-dark.png b/packages/components/select/__screenshots__/03-dark.png index 45b6acfc67..a802341cc2 100644 Binary files a/packages/components/select/__screenshots__/03-dark.png and b/packages/components/select/__screenshots__/03-dark.png differ diff --git a/packages/components/select/__screenshots__/03-light.png b/packages/components/select/__screenshots__/03-light.png index 73990b419b..08af4a3976 100644 Binary files a/packages/components/select/__screenshots__/03-light.png and b/packages/components/select/__screenshots__/03-light.png differ diff --git a/packages/components/select/__screenshots__/04-dark.png b/packages/components/select/__screenshots__/04-dark.png index 5fdc7e5a27..c19c7dcce2 100644 Binary files a/packages/components/select/__screenshots__/04-dark.png and b/packages/components/select/__screenshots__/04-dark.png differ diff --git a/packages/components/select/__screenshots__/04-light.png b/packages/components/select/__screenshots__/04-light.png index 34ae4230f5..7a7b5be84a 100644 Binary files a/packages/components/select/__screenshots__/04-light.png and b/packages/components/select/__screenshots__/04-light.png differ diff --git a/packages/components/select/e2e.ts b/packages/components/select/e2e.ts index 5572a527c4..49f06de831 100644 --- a/packages/components/select/e2e.ts +++ b/packages/components/select/e2e.ts @@ -20,7 +20,6 @@ import { KbqSelectModule } from './select.module'; default - hover selected focused disabled @@ -62,7 +61,6 @@ export class E2eSelectStates {}
caption
default1 long name long name long name - hover selected focused disabled @@ -105,7 +103,6 @@ export class E2eMultiSelectStates {} default default1 long name long name long name - hover selected focused disabled @@ -153,7 +150,6 @@ export class E2eMultilineSelectStates {} default default1 long name long name long name - hover selected focused disabled diff --git a/packages/components/tags/__screenshots__/03-dark.png b/packages/components/tags/__screenshots__/03-dark.png index 33846d00ae..634375b93d 100644 Binary files a/packages/components/tags/__screenshots__/03-dark.png and b/packages/components/tags/__screenshots__/03-dark.png differ diff --git a/packages/components/tags/__screenshots__/03-light.png b/packages/components/tags/__screenshots__/03-light.png index 093fdc6c0f..8f9ed78889 100644 Binary files a/packages/components/tags/__screenshots__/03-light.png and b/packages/components/tags/__screenshots__/03-light.png differ diff --git a/packages/components/timezone/__screenshots__/01-dark.png b/packages/components/timezone/__screenshots__/01-dark.png index ae43277319..02941e4243 100644 Binary files a/packages/components/timezone/__screenshots__/01-dark.png and b/packages/components/timezone/__screenshots__/01-dark.png differ diff --git a/packages/components/timezone/__screenshots__/01-light.png b/packages/components/timezone/__screenshots__/01-light.png index 30ef100803..7a97112615 100644 Binary files a/packages/components/timezone/__screenshots__/01-light.png and b/packages/components/timezone/__screenshots__/01-light.png differ diff --git a/packages/components/timezone/__screenshots__/02-light.png b/packages/components/timezone/__screenshots__/02-light.png index 4c4431ff1f..946beb9acb 100644 Binary files a/packages/components/timezone/__screenshots__/02-light.png and b/packages/components/timezone/__screenshots__/02-light.png differ diff --git a/packages/components/timezone/e2e.ts b/packages/components/timezone/e2e.ts index 27fc456193..212fca9d37 100644 --- a/packages/components/timezone/e2e.ts +++ b/packages/components/timezone/e2e.ts @@ -96,16 +96,12 @@ class CustomErrorStateMatcher implements ErrorStateMatcher { - - - - } diff --git a/packages/components/tree-select/__screenshots__/01-dark.png b/packages/components/tree-select/__screenshots__/01-dark.png index e066efa3e6..234a7e93e2 100644 Binary files a/packages/components/tree-select/__screenshots__/01-dark.png and b/packages/components/tree-select/__screenshots__/01-dark.png differ diff --git a/packages/components/tree-select/__screenshots__/01-light.png b/packages/components/tree-select/__screenshots__/01-light.png index 54426ecacb..2e06776d09 100644 Binary files a/packages/components/tree-select/__screenshots__/01-light.png and b/packages/components/tree-select/__screenshots__/01-light.png differ diff --git a/packages/components/tree-select/__screenshots__/02-dark.png b/packages/components/tree-select/__screenshots__/02-dark.png index db3c4499bc..c7759afaa7 100644 Binary files a/packages/components/tree-select/__screenshots__/02-dark.png and b/packages/components/tree-select/__screenshots__/02-dark.png differ diff --git a/packages/components/tree-select/__screenshots__/02-light.png b/packages/components/tree-select/__screenshots__/02-light.png index ec99988c95..5bc441aefa 100644 Binary files a/packages/components/tree-select/__screenshots__/02-light.png and b/packages/components/tree-select/__screenshots__/02-light.png differ diff --git a/packages/components/tree-select/__screenshots__/03-dark.png b/packages/components/tree-select/__screenshots__/03-dark.png index ed6c702a83..1c592b621f 100644 Binary files a/packages/components/tree-select/__screenshots__/03-dark.png and b/packages/components/tree-select/__screenshots__/03-dark.png differ diff --git a/packages/components/tree-select/__screenshots__/03-light.png b/packages/components/tree-select/__screenshots__/03-light.png index 96971091e8..e72db0b3ee 100644 Binary files a/packages/components/tree-select/__screenshots__/03-light.png and b/packages/components/tree-select/__screenshots__/03-light.png differ diff --git a/packages/components/tree-select/_tree-select-theme.scss b/packages/components/tree-select/_tree-select-theme.scss index a76f72db03..781508482e 100644 --- a/packages/components/tree-select/_tree-select-theme.scss +++ b/packages/components/tree-select/_tree-select-theme.scss @@ -1,4 +1,5 @@ @use '../core/styles/common/tokens' as *; +@use '../tree/tree-theme' as tree-theme; @mixin kbq-tree-select-theme() { .kbq-tree-select { @@ -34,6 +35,44 @@ box-shadow: var(--kbq-select-panel-dropdown-shadow); background: var(--kbq-select-panel-dropdown-background); + .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled) { + &:hover:not(.kbq-focused), + &.kbq-hovered:not(.kbq-focused) { + @include tree-theme.kbq-tree-option(default); + } + + &.kbq-focused { + @include tree-theme.kbq-tree-option(states-hover); + } + + &.kbq-selected { + &:hover:not(.kbq-focused), + &.kbq-hovered:not(.kbq-focused) { + @include tree-theme.kbq-tree-option(states-selected); + } + + &.kbq-focused { + @include tree-theme.kbq-tree-option(states-selected-hover); + } + } + + &.kbq-checked:not(.kbq-selected), + &.kbq-tree-option_multiple.kbq-selected { + &:hover:not(.kbq-focused), + &.kbq-hovered:not(.kbq-focused) { + background: var(--kbq-tree-multiple-states-selected-container-background); + } + + &.kbq-focused { + background: var(--kbq-tree-multiple-states-selected-hover-container-background); + } + } + + &.kbq-focused:not(.kbq-action-button-focused) { + border-color: transparent; + } + } + & .kbq-select__footer { border-color: var(--kbq-divider-color, var(--kbq-line-contrast-less)); }