From 18560fed1ff625317ed1da56780038539d292814 Mon Sep 17 00:00:00 2001 From: Dimitar Kalaydzhiev Date: Thu, 17 Nov 2022 11:11:44 +0200 Subject: [PATCH] feat: use focus-indicator mixin for contrast shadows --- packages/bootstrap/scss/_variables.scss | 1 + packages/classic/scss/_variables.scss | 1 + .../core/scss/mixins/_focus-indicator.scss | 7 +++ packages/core/scss/mixins/index.import.scss | 1 + packages/default/scss/_variables.scss | 1 + .../default/scss/action-sheet/_theme.scss | 2 +- packages/default/scss/breadcrumb/_theme.scss | 4 +- packages/default/scss/button/_theme.scss | 8 ++-- packages/default/scss/calendar/_theme.scss | 6 +-- packages/default/scss/card/_theme.scss | 4 +- packages/default/scss/checkbox/_theme.scss | 4 +- packages/default/scss/chip/_theme.scss | 10 ++-- packages/default/scss/coloreditor/_theme.scss | 2 +- .../default/scss/colorgradient/_theme.scss | 4 +- .../default/scss/colorpalette/_theme.scss | 2 +- packages/default/scss/drawer/_theme.scss | 2 +- .../default/scss/expansion-panel/_theme.scss | 4 +- packages/default/scss/fab/_theme.scss | 20 +++++--- packages/default/scss/filter/_theme.scss | 2 +- packages/default/scss/grid/_theme.scss | 8 ++-- packages/default/scss/input/_theme.scss | 48 +++++++++---------- packages/default/scss/list/_theme.scss | 2 +- packages/default/scss/listview/_theme.scss | 2 +- packages/default/scss/menu/_theme.scss | 4 +- packages/default/scss/orgchart/_theme.scss | 4 +- packages/default/scss/pager/_theme.scss | 4 +- packages/default/scss/panelbar/_theme.scss | 4 +- packages/default/scss/pivotgrid/_theme.scss | 2 +- packages/default/scss/radio/_theme.scss | 4 +- packages/default/scss/scrollview/_theme.scss | 4 +- packages/default/scss/slider/_theme.scss | 4 +- .../default/scss/split-button/_theme.scss | 2 +- packages/default/scss/stepper/_theme.scss | 2 +- packages/default/scss/switch/_theme.scss | 12 ++++- packages/default/scss/table/_theme.scss | 2 +- packages/default/scss/tabstrip/_theme.scss | 4 +- packages/default/scss/taskboard/_theme.scss | 2 +- packages/default/scss/tilelayout/_theme.scss | 2 +- packages/default/scss/timeline/_theme.scss | 2 +- packages/default/scss/toolbar/_theme.scss | 4 +- packages/default/scss/treeview/_theme.scss | 4 +- packages/default/scss/upload/_theme.scss | 6 ++- packages/default/scss/window/_theme.scss | 2 +- packages/material/scss/_variables.scss | 1 + 44 files changed, 126 insertions(+), 94 deletions(-) create mode 100644 packages/core/scss/mixins/_focus-indicator.scss diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss index 871419fb242..04cc9880ec7 100644 --- a/packages/bootstrap/scss/_variables.scss +++ b/packages/bootstrap/scss/_variables.scss @@ -9,6 +9,7 @@ $kendo-enable-rounded: true !default; $kendo-enable-shadows: true !default; $kendo-enable-gradients: true !default; $kendo-enable-transitions: true !default; +$kendo-enable-focus-contrast: false !default; $kendo-use-input-button-width: false !default; $kendo-use-input-spinner-width: false !default; diff --git a/packages/classic/scss/_variables.scss b/packages/classic/scss/_variables.scss index cbb6dcae3a0..46a26bef80e 100644 --- a/packages/classic/scss/_variables.scss +++ b/packages/classic/scss/_variables.scss @@ -6,6 +6,7 @@ $kendo-enable-rounded: true !default; $kendo-enable-shadows: true !default; $kendo-enable-gradients: true !default; $kendo-enable-transitions: true !default; +$kendo-enable-focus-contrast: false !default; $kendo-use-input-button-width: false !default; $kendo-use-input-spinner-width: false !default; diff --git a/packages/core/scss/mixins/_focus-indicator.scss b/packages/core/scss/mixins/_focus-indicator.scss new file mode 100644 index 00000000000..18304df4192 --- /dev/null +++ b/packages/core/scss/mixins/_focus-indicator.scss @@ -0,0 +1,7 @@ +@mixin focus-indicator( $indicator, $inset: false, $themeable: false, $type: "box-shadow" ) { + @if $kendo-enable-focus-contrast and k-list-nth($indicator, 1) { + @include box-shadow( if( $inset, inset, null ) 0 0 0 2px if( $themeable, currentColor, rgb( 0, 0, 0 ) ) ); + } @else { + @include box-shadow( $indicator... ); + } +} diff --git a/packages/core/scss/mixins/index.import.scss b/packages/core/scss/mixins/index.import.scss index 5094525a874..437c996b373 100644 --- a/packages/core/scss/mixins/index.import.scss +++ b/packages/core/scss/mixins/index.import.scss @@ -2,6 +2,7 @@ @import "./_box-shadow.scss"; @import "./_data-uri.scss"; @import "./_disabled.scss"; +@import "./_focus-indicator.scss"; @import "./_gradient.scss"; @import "./_hide-scrollbar.scss"; @import "./_import-once.scss"; diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss index aca07097c5e..9d13b4a864a 100644 --- a/packages/default/scss/_variables.scss +++ b/packages/default/scss/_variables.scss @@ -7,6 +7,7 @@ $kendo-enable-rounded: true !default; $kendo-enable-shadows: true !default; $kendo-enable-gradients: true !default; $kendo-enable-transitions: true !default; +$kendo-enable-focus-contrast: false !default; $kendo-use-input-button-width: true !default; $kendo-use-input-spinner-width: true !default; diff --git a/packages/default/scss/action-sheet/_theme.scss b/packages/default/scss/action-sheet/_theme.scss index 90ef1cfa376..8586d22633e 100644 --- a/packages/default/scss/action-sheet/_theme.scss +++ b/packages/default/scss/action-sheet/_theme.scss @@ -56,7 +56,7 @@ $actionsheet-item-focus-border, $actionsheet-item-focus-gradient ); - @include box-shadow( $actionsheet-item-focus-shadow ); + @include focus-indicator( $actionsheet-item-focus-shadow ); } diff --git a/packages/default/scss/breadcrumb/_theme.scss b/packages/default/scss/breadcrumb/_theme.scss index d1049f34342..a8c3499a913 100644 --- a/packages/default/scss/breadcrumb/_theme.scss +++ b/packages/default/scss/breadcrumb/_theme.scss @@ -41,7 +41,7 @@ $breadcrumb-link-focus-bg, $breadcrumb-link-focus-border ); - @include box-shadow( $breadcrumb-link-focus-shadow ); + @include focus-indicator( $breadcrumb-link-focus-shadow, true ); } } @@ -72,7 +72,7 @@ $breadcrumb-root-link-focus-bg, $breadcrumb-root-link-focus-border ); - @include box-shadow( $breadcrumb-root-link-focus-shadow ); + @include focus-indicator( $breadcrumb-root-link-focus-shadow, true ); } } diff --git a/packages/default/scss/button/_theme.scss b/packages/default/scss/button/_theme.scss index 25f323a379e..ae3e7021098 100644 --- a/packages/default/scss/button/_theme.scss +++ b/packages/default/scss/button/_theme.scss @@ -25,7 +25,7 @@ // Focus state &:focus, &.k-focus { - @include box-shadow( $kendo-button-focus-shadow ); + @include focus-indicator( $kendo-button-focus-shadow, true, true ); } // Active state @@ -102,7 +102,7 @@ &:focus, &.k-focus { @if ( $kendo-solid-button-shadow ) { - box-shadow: 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread rgba( $_button-border, $kendo-solid-button-shadow-opacity ); + @include focus-indicator( 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread rgba( $_button-border, $kendo-solid-button-shadow-opacity ), true, true ); } } @@ -163,7 +163,7 @@ &:focus, &.k-focus { @if $kendo-outline-button-shadow { - box-shadow: 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread rgba( $color, $kendo-outline-button-shadow-opacity ); + @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread rgba( $color, $kendo-outline-button-shadow-opacity ), true, true ); } } @@ -224,7 +224,7 @@ &:focus, &.k-focus { @if ( $kendo-link-button-shadow ) { - box-shadow: 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread rgba( $color, $kendo-link-button-shadow-opacity ); + @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread rgba( $color, $kendo-link-button-shadow-opacity ), true, true ); } } diff --git a/packages/default/scss/calendar/_theme.scss b/packages/default/scss/calendar/_theme.scss index 4f1954f5688..43b03e1b4f6 100644 --- a/packages/default/scss/calendar/_theme.scss +++ b/packages/default/scss/calendar/_theme.scss @@ -40,7 +40,7 @@ box-shadow: inset 0 0 0 1px $calendar-today-color; } &.k-focus .k-calendar-cell-inner { - box-shadow: inset 0 0 0 1px $calendar-today-color, $calendar-cell-focus-shadow; + @include focus-indicator( $indicator: ( inset 0 0 0 1px $calendar-today-color, $calendar-cell-focus-shadow ), $inset: true ); } } @else if $calendar-today-style == color { color: $calendar-today-color; @@ -100,11 +100,11 @@ } .k-calendar-td:focus .k-calendar-cell-inner, .k-calendar-td.k-focus .k-calendar-cell-inner { - box-shadow: $calendar-cell-focus-shadow; + @include focus-indicator( $calendar-cell-focus-shadow, true ); } .k-calendar-td.k-selected:focus .k-calendar-cell-inner, .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner { - box-shadow: $calendar-cell-selected-focus-shadow; + @include focus-indicator( $calendar-cell-selected-focus-shadow, true ); } diff --git a/packages/default/scss/card/_theme.scss b/packages/default/scss/card/_theme.scss index d57fc4d6660..3c625fb1c2b 100644 --- a/packages/default/scss/card/_theme.scss +++ b/packages/default/scss/card/_theme.scss @@ -21,7 +21,7 @@ $card-focus-bg, $card-focus-border ); - @include box-shadow( $card-focus-shadow ); + @include focus-indicator( $card-focus-shadow ); } &.k-selected { @@ -80,7 +80,7 @@ &.k-focus, &.k-selected { > .k-card { - @include box-shadow( $card-focus-shadow ); + @include focus-indicator( $card-focus-shadow ); } } } diff --git a/packages/default/scss/checkbox/_theme.scss b/packages/default/scss/checkbox/_theme.scss index 64c74144924..fcc7d2f878e 100644 --- a/packages/default/scss/checkbox/_theme.scss +++ b/packages/default/scss/checkbox/_theme.scss @@ -25,7 +25,7 @@ .k-checkbox:focus, .k-checkbox.k-focus { @include fill( $border: $kendo-checkbox-focus-border ); - @include box-shadow( $kendo-checkbox-focus-shadow ); + @include focus-indicator( $kendo-checkbox-focus-shadow ); } @@ -52,7 +52,7 @@ .k-checkbox:checked:focus, .k-checkbox.k-checked.k-focus { @include fill( $border: $kendo-checkbox-focus-checked-border ); - @include box-shadow( $kendo-checkbox-focus-checked-shadow ); + @include focus-indicator( $kendo-checkbox-focus-checked-shadow ); } diff --git a/packages/default/scss/chip/_theme.scss b/packages/default/scss/chip/_theme.scss index c5c36d7a711..6a355860f95 100644 --- a/packages/default/scss/chip/_theme.scss +++ b/packages/default/scss/chip/_theme.scss @@ -14,8 +14,8 @@ &:focus, &.k-focus { - @include box-shadow( $kendo-chip-solid-shadow ); @include fill( $bg: $kendo-chip-solid-focus-bg ); + @include focus-indicator( $kendo-chip-solid-shadow ); } &:hover, @@ -36,7 +36,7 @@ &:focus, &.k-focus { - @include box-shadow( 0 0 0 2px rgba( $color, .16 ) ); + @include focus-indicator( 0 0 0 2px rgba( $color, .16 ) ); } &:hover, @@ -64,7 +64,7 @@ &:focus, &.k-focus { - @include box-shadow( $kendo-chip-outline-shadow ); + @include focus-indicator( $kendo-chip-outline-shadow ); } &:hover, @@ -90,7 +90,7 @@ &:focus, &.k-focus { - @include box-shadow( 0 0 0 2px if( $dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 )) ); + @include focus-indicator( 0 0 0 2px if( $dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 )) ); } &:hover, @@ -116,7 +116,7 @@ &:focus, &.k-focus { - @include box-shadow( 0 0 0 2px if( $dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 )) ); + @include focus-indicator( 0 0 0 2px if( $dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 )) ); } &:hover, diff --git a/packages/default/scss/coloreditor/_theme.scss b/packages/default/scss/coloreditor/_theme.scss index a6f5baff5f0..c182f11f089 100644 --- a/packages/default/scss/coloreditor/_theme.scss +++ b/packages/default/scss/coloreditor/_theme.scss @@ -12,7 +12,7 @@ .k-coloreditor:focus, .k-coloreditor.k-focus { @include fill( $border: $coloreditor-focus-border ); - @include box-shadow( $coloreditor-focus-shadow ); + @include focus-indicator( $coloreditor-focus-shadow ); } .k-coloreditor .k-colorgradient:focus, diff --git a/packages/default/scss/colorgradient/_theme.scss b/packages/default/scss/colorgradient/_theme.scss index 080c952c5c9..f7cfadd0bcf 100644 --- a/packages/default/scss/colorgradient/_theme.scss +++ b/packages/default/scss/colorgradient/_theme.scss @@ -12,7 +12,7 @@ .k-colorgradient:focus, .k-colorgradient.k-focus { @include fill( $border: $colorgradient-focus-border ); - @include box-shadow( $colorgradient-focus-shadow ); + @include focus-indicator( $colorgradient-focus-shadow ); } // Canvas @@ -32,7 +32,7 @@ &:focus, &.k-focus { @include fill( $bg: transparent, $border: $kendo-color-white ); - @include box-shadow( $colorgradient-draghandle-focus-shadow ); + @include focus-indicator( $colorgradient-draghandle-focus-shadow ); } &:hover, diff --git a/packages/default/scss/colorpalette/_theme.scss b/packages/default/scss/colorpalette/_theme.scss index 99b0a81c9b4..718062d3ee5 100644 --- a/packages/default/scss/colorpalette/_theme.scss +++ b/packages/default/scss/colorpalette/_theme.scss @@ -5,7 +5,7 @@ &:focus, &.k-focus { - @include box-shadow( $colorpalette-tile-focus-shadow ); + @include focus-indicator( $colorpalette-tile-focus-shadow ); } &:hover, diff --git a/packages/default/scss/drawer/_theme.scss b/packages/default/scss/drawer/_theme.scss index ee13fb5cad3..1b8661ec546 100644 --- a/packages/default/scss/drawer/_theme.scss +++ b/packages/default/scss/drawer/_theme.scss @@ -33,7 +33,7 @@ &:focus, &.k-focus { background-color: $kendo-drawer-focus-bg; - box-shadow: $kendo-drawer-focus-shadow; + @include focus-indicator( $kendo-drawer-focus-shadow, true ); &:hover, &.k-hover { diff --git a/packages/default/scss/expansion-panel/_theme.scss b/packages/default/scss/expansion-panel/_theme.scss index aad42c8986c..47e35e73fa2 100644 --- a/packages/default/scss/expansion-panel/_theme.scss +++ b/packages/default/scss/expansion-panel/_theme.scss @@ -8,7 +8,7 @@ ); &.k-focus { - box-shadow: $expander-focus-shadow; + @include focus-indicator( $expander-focus-shadow, true ); } } @@ -27,7 +27,7 @@ &.k-focus { background-color: $expander-header-focus-bg; - box-shadow: $expander-header-focus-shadow; + @include focus-indicator( $expander-header-focus-shadow, true ); } } diff --git a/packages/default/scss/fab/_theme.scss b/packages/default/scss/fab/_theme.scss index 8507e78e068..6ccb4ab551a 100644 --- a/packages/default/scss/fab/_theme.scss +++ b/packages/default/scss/fab/_theme.scss @@ -25,9 +25,13 @@ @each $name, $color in $kendo-fab-theme-colors { .k-fab-solid-#{$name}.k-focus, .k-fab-solid-#{$name}:focus { - outline-style: solid; - outline-width: 2px; - outline-color: rgba( $color, .3 ); + @if $kendo-enable-focus-contrast { + @include box-shadow( inset 0 0 0 2px currentColor ); + } @else { + outline-style: solid; + outline-width: 2px; + outline-color: rgba( $color, .3 ); + } } } @@ -86,9 +90,13 @@ .k-fab-item:focus .k-fab-item-icon, .k-fab-item.k-focus .k-fab-item-text, .k-fab-item.k-focus .k-fab-item-icon { - outline-style: solid; - outline-width: 2px; - outline-color: rgba(0, 0, 0, .08); + @if $kendo-enable-focus-contrast { + @include box-shadow( inset 0 0 0 2px if( $dark-theme, $kendo-color-white, $kendo-color-black ) ); + } @else { + outline-style: solid; + outline-width: 2px; + outline-color: rgba(0, 0, 0, .08); + } } // Active state diff --git a/packages/default/scss/filter/_theme.scss b/packages/default/scss/filter/_theme.scss index 30d356df000..394bf9a2fce 100644 --- a/packages/default/scss/filter/_theme.scss +++ b/packages/default/scss/filter/_theme.scss @@ -22,7 +22,7 @@ // Focus .k-toolbar:focus, .k-toolbar.k-focus { - @include box-shadow( $filter-toolbar-focus-shadow ); + @include focus-indicator( $filter-toolbar-focus-shadow ); } } diff --git a/packages/default/scss/grid/_theme.scss b/packages/default/scss/grid/_theme.scss index 6044ca82c45..830fa93ba1e 100644 --- a/packages/default/scss/grid/_theme.scss +++ b/packages/default/scss/grid/_theme.scss @@ -95,7 +95,7 @@ .k-grid-pager { &:focus, &.k-focus { - box-shadow: $kendo-grid-focus-shadow; + @include focus-indicator( $kendo-grid-focus-shadow, true ); } } @@ -181,7 +181,7 @@ } &:focus, &.k-focus { - box-shadow: inset 0 0 0 2px rgba( $kendo-color-black, .1 ); + @include focus-indicator( inset 0 0 0 2px rgba( $kendo-color-black, .1 ), true ); } &.k-active { color: $kendo-selected-text; @@ -365,7 +365,7 @@ } .k-columnmenu-item:focus, .k-columnmenu-item.k-focus { - @include box-shadow( $kendo-list-item-focus-shadow ); + @include focus-indicator( $kendo-list-item-focus-shadow, true ); } .k-columnmenu-item { @@ -410,7 +410,7 @@ &:focus, &.k-focus { - @include box-shadow( $kendo-list-item-focus-shadow ); + @include focus-indicator( $kendo-list-item-focus-shadow, true ); } } } diff --git a/packages/default/scss/input/_theme.scss b/packages/default/scss/input/_theme.scss index 19f6e938e60..8b04f408410 100644 --- a/packages/default/scss/input/_theme.scss +++ b/packages/default/scss/input/_theme.scss @@ -27,7 +27,7 @@ $kendo-input-focus-bg, $kendo-input-focus-border ); - @include box-shadow( $kendo-input-focus-shadow ); + @include focus-indicator( $kendo-input-focus-shadow ); } &:focus-within { @include fill ( @@ -35,7 +35,7 @@ $kendo-input-focus-bg, $kendo-input-focus-border ); - @include box-shadow( $kendo-input-focus-shadow ); + @include focus-indicator( $kendo-input-focus-shadow ); } // Disabled @@ -63,10 +63,10 @@ &:focus, &.k-focus { - @include box-shadow( $kendo-input-invalid-shadow ); + @include focus-indicator( $kendo-input-invalid-shadow ); } &:focus-within { - @include box-shadow( $kendo-input-invalid-shadow ); + @include focus-indicator( $kendo-input-invalid-shadow ); } } @@ -103,7 +103,7 @@ $kendo-picker-focus-border, $kendo-picker-focus-gradient ); - @include box-shadow( $kendo-picker-focus-shadow ); + @include focus-indicator( $kendo-picker-focus-shadow ); } &:focus-within { @include fill ( @@ -112,7 +112,7 @@ $kendo-picker-focus-border, $kendo-picker-focus-gradient ); - @include box-shadow( $kendo-picker-focus-shadow ); + @include focus-indicator( $kendo-picker-focus-shadow ); } // Disabled @@ -140,10 +140,10 @@ &:focus, &.k-focus { - @include box-shadow( $kendo-input-invalid-shadow ); + @include focus-indicator( $kendo-input-invalid-shadow ); } &:focus-within { - @include box-shadow( $kendo-input-invalid-shadow ); + @include focus-indicator( $kendo-input-invalid-shadow ); } } } @@ -188,7 +188,7 @@ $kendo-input-outline-focus-bg, $kendo-input-outline-focus-border ); - @include box-shadow ( $kendo-input-outline-focus-shadow ); + @include focus-indicator( $kendo-input-outline-focus-shadow ); } &:focus-within { @include fill ( @@ -196,7 +196,7 @@ $kendo-input-outline-focus-bg, $kendo-input-outline-focus-border ); - @include box-shadow ( $kendo-input-outline-focus-shadow ); + @include focus-indicator( $kendo-input-outline-focus-shadow ); } // Disabled @@ -224,10 +224,10 @@ &:focus, &.k-focus { - @include box-shadow( $kendo-input-invalid-shadow ); + @include focus-indicator( $kendo-input-invalid-shadow ); } &:focus-within { - @include box-shadow( $kendo-input-invalid-shadow ); + @include focus-indicator( $kendo-input-invalid-shadow ); } } @@ -260,7 +260,7 @@ $kendo-picker-outline-focus-bg, $kendo-picker-outline-focus-border ); - @include box-shadow ( $kendo-picker-outline-focus-shadow ); + @include focus-indicator( $kendo-picker-outline-focus-shadow ); } &:focus-within { @include fill ( @@ -268,7 +268,7 @@ $kendo-picker-outline-focus-bg, $kendo-picker-outline-focus-border ); - @include box-shadow ( $kendo-picker-outline-focus-shadow ); + @include focus-indicator( $kendo-picker-outline-focus-shadow ); } &:focus:hover, @@ -307,10 +307,10 @@ &:focus, &.k-focus { - @include box-shadow( $kendo-input-invalid-shadow ); + @include focus-indicator( $kendo-input-invalid-shadow ); } &:focus-within { - @include box-shadow( $kendo-input-invalid-shadow ); + @include focus-indicator( $kendo-input-invalid-shadow ); } } } @@ -342,7 +342,7 @@ $kendo-input-flat-focus-bg, $kendo-input-flat-focus-border ); - @include box-shadow( $kendo-input-flat-focus-shadow ); + @include focus-indicator( $kendo-input-flat-focus-shadow ); } &:focus-within { @include fill ( @@ -350,7 +350,7 @@ $kendo-input-flat-focus-bg, $kendo-input-flat-focus-border ); - @include box-shadow( $kendo-input-flat-focus-shadow ); + @include focus-indicator( $kendo-input-flat-focus-shadow ); } // Disabled @@ -378,10 +378,10 @@ &:focus, &.k-focus { - @include box-shadow( $kendo-input-invalid-shadow ); + @include focus-indicator( $kendo-input-invalid-shadow ); } &:focus-within { - @include box-shadow( $kendo-input-invalid-shadow ); + @include focus-indicator( $kendo-input-invalid-shadow ); } } } @@ -413,7 +413,7 @@ $kendo-picker-flat-focus-bg, $kendo-picker-flat-focus-border ); - @include box-shadow( $kendo-picker-flat-focus-shadow ); + @include focus-indicator( $kendo-picker-flat-focus-shadow ); } &:focus-within { @include fill ( @@ -421,7 +421,7 @@ $kendo-picker-flat-focus-bg, $kendo-picker-flat-focus-border ); - @include box-shadow( $kendo-picker-flat-focus-shadow ); + @include focus-indicator( $kendo-picker-flat-focus-shadow ); } &:focus:hover, @@ -460,10 +460,10 @@ &:focus, &.k-focus { - @include box-shadow( $kendo-input-invalid-shadow ); + @include focus-indicator( $kendo-input-invalid-shadow ); } &:focus-within { - @include box-shadow( $kendo-input-invalid-shadow ); + @include focus-indicator( $kendo-input-invalid-shadow ); } } } diff --git a/packages/default/scss/list/_theme.scss b/packages/default/scss/list/_theme.scss index 20f1e4367e0..0bd40dd3885 100644 --- a/packages/default/scss/list/_theme.scss +++ b/packages/default/scss/list/_theme.scss @@ -45,7 +45,7 @@ $kendo-list-item-focus-text, $kendo-list-item-focus-bg ); - @include box-shadow( $kendo-list-item-focus-shadow ); + @include focus-indicator( $kendo-list-item-focus-shadow, true ); } // Selected diff --git a/packages/default/scss/listview/_theme.scss b/packages/default/scss/listview/_theme.scss index 9886688797c..1f2ba48d57b 100644 --- a/packages/default/scss/listview/_theme.scss +++ b/packages/default/scss/listview/_theme.scss @@ -19,7 +19,7 @@ $kendo-listview-item-focus-bg, $kendo-listview-item-focus-border ); - @include box-shadow( $kendo-listview-item-focus-shadow ); + @include focus-indicator( $kendo-listview-item-focus-shadow, true ); } > .k-selected { diff --git a/packages/default/scss/menu/_theme.scss b/packages/default/scss/menu/_theme.scss index 728354a9076..08dd6db8449 100644 --- a/packages/default/scss/menu/_theme.scss +++ b/packages/default/scss/menu/_theme.scss @@ -38,7 +38,7 @@ &:focus, &.k-focus { - @include box-shadow( $menu-item-focus-shadow ); + @include focus-indicator( $menu-item-focus-shadow, true ); } } } @@ -85,7 +85,7 @@ .k-item:focus, .k-item.k-focus { > .k-link { - @include box-shadow( $kendo-menu-popup-item-focus-shadow ); + @include focus-indicator( $kendo-menu-popup-item-focus-shadow, true ); } } } diff --git a/packages/default/scss/orgchart/_theme.scss b/packages/default/scss/orgchart/_theme.scss index 080150b12d5..12770b566a2 100644 --- a/packages/default/scss/orgchart/_theme.scss +++ b/packages/default/scss/orgchart/_theme.scss @@ -19,7 +19,7 @@ &:focus, &.k-focus { - @include box-shadow( $orgchart-card-focus-shadow ); + @include focus-indicator( $orgchart-card-focus-shadow ); } } @@ -33,7 +33,7 @@ } .k-orgchart-node-group-container:focus, .k-orgchart-node-group-container.k-focus { - @include box-shadow( $orgchart-node-group-focus-shadow ); + @include focus-indicator( $orgchart-node-group-focus-shadow ); @include fill ( $border: $orgchart-node-group-focus-border ); } diff --git a/packages/default/scss/pager/_theme.scss b/packages/default/scss/pager/_theme.scss index 9ca4e3dbac2..589b9b4b19b 100644 --- a/packages/default/scss/pager/_theme.scss +++ b/packages/default/scss/pager/_theme.scss @@ -10,7 +10,7 @@ &:focus, &.k-focus { @include fill( $bg: $kendo-pager-focus-bg ); - @include box-shadow( $kendo-pager-focus-shadow ); + @include focus-indicator( $kendo-pager-focus-shadow, true ); } } @@ -42,7 +42,7 @@ &:focus, &.k-focus { background-color: $kendo-pager-item-focus-bg; - @include box-shadow( $kendo-pager-item-focus-shadow ); + @include focus-indicator( $kendo-pager-item-focus-shadow, true ); } } diff --git a/packages/default/scss/panelbar/_theme.scss b/packages/default/scss/panelbar/_theme.scss index ea3cb0ba581..bf6a3eaa4a9 100644 --- a/packages/default/scss/panelbar/_theme.scss +++ b/packages/default/scss/panelbar/_theme.scss @@ -56,7 +56,7 @@ $panelbar-header-focus-border, $panelbar-header-focus-gradient ); - box-shadow: $panelbar-header-focus-shadow; + @include focus-indicator( $panelbar-header-focus-shadow, true ); } // Focus & Hover @@ -148,7 +148,7 @@ $panelbar-item-focus-border, $panelbar-item-focus-gradient ); - box-shadow: $panelbar-item-focus-shadow; + @include focus-indicator( $panelbar-item-focus-shadow, true ); } // Focus & Hover diff --git a/packages/default/scss/pivotgrid/_theme.scss b/packages/default/scss/pivotgrid/_theme.scss index e10e8cafebb..939c9bc7552 100644 --- a/packages/default/scss/pivotgrid/_theme.scss +++ b/packages/default/scss/pivotgrid/_theme.scss @@ -67,7 +67,7 @@ .k-grouping-row > .k-pivotgrid-cell:focus, .k-detail-row > .k-pivotgrid-cell:focus, .k-group-footer > .k-pivotgrid-cell:focus { - @include box-shadow($pivotgrid-focus-shadow); + @include focus-indicator( $pivotgrid-focus-shadow, true ); } // Selected state diff --git a/packages/default/scss/radio/_theme.scss b/packages/default/scss/radio/_theme.scss index 5c35fc539a6..8c20188ac99 100644 --- a/packages/default/scss/radio/_theme.scss +++ b/packages/default/scss/radio/_theme.scss @@ -25,7 +25,7 @@ .k-radio:focus, .k-radio.k-focus { @include fill( $border: $kendo-radio-focus-border ); - @include box-shadow( $kendo-radio-focus-shadow ); + @include focus-indicator( $kendo-radio-focus-shadow ); } @@ -54,7 +54,7 @@ .k-radio:checked:focus, .k-radio.k-checked.k-focus { @include fill( $border: $kendo-radio-focus-checked-border ); - @include box-shadow( $kendo-radio-focus-checked-shadow ); + @include focus-indicator( $kendo-radio-focus-checked-shadow ); } diff --git a/packages/default/scss/scrollview/_theme.scss b/packages/default/scss/scrollview/_theme.scss index 5e53d7254fe..66780e8e68c 100644 --- a/packages/default/scss/scrollview/_theme.scss +++ b/packages/default/scss/scrollview/_theme.scss @@ -54,7 +54,7 @@ opacity: $scrollview-navigation-hover-opacity; .k-icon::before { - box-shadow: $scrollview-pagebutton-shadow; + @include focus-indicator( $scrollview-pagebutton-shadow ); } } @@ -79,7 +79,7 @@ &:focus, &.k-focus { - box-shadow: $scrollview-pagebutton-shadow; + @include focus-indicator( $scrollview-pagebutton-shadow ); } } diff --git a/packages/default/scss/slider/_theme.scss b/packages/default/scss/slider/_theme.scss index bb4d4cedfcb..376059ca89f 100644 --- a/packages/default/scss/slider/_theme.scss +++ b/packages/default/scss/slider/_theme.scss @@ -48,13 +48,13 @@ &:focus, &.k-focus { - @include box-shadow( $slider-draghandle-focus-shadow ); + @include focus-indicator( $slider-draghandle-focus-shadow ); } } &.k-focus { .k-draghandle { - @include box-shadow( $slider-draghandle-focus-shadow ); + @include focus-indicator( $slider-draghandle-focus-shadow ); } } diff --git a/packages/default/scss/split-button/_theme.scss b/packages/default/scss/split-button/_theme.scss index 78dbf07eaf1..f63168f4534 100644 --- a/packages/default/scss/split-button/_theme.scss +++ b/packages/default/scss/split-button/_theme.scss @@ -3,7 +3,7 @@ // Split button .k-split-button:focus, .k-split-button.k-focus { - @include box-shadow( $kendo-split-button-focus-shadow ); + @include focus-indicator( $kendo-split-button-focus-shadow ); } } diff --git a/packages/default/scss/stepper/_theme.scss b/packages/default/scss/stepper/_theme.scss index f6cc72a2da4..398c66da106 100644 --- a/packages/default/scss/stepper/_theme.scss +++ b/packages/default/scss/stepper/_theme.scss @@ -32,7 +32,7 @@ .k-step-link:focus { // Labels only .k-step-label:only-child { - @include box-shadow( inset 0 0 0 $stepper-indicator-focus-size $kendo-component-border ); + @include focus-indicator( $indicator: ( inset 0 0 0 $stepper-indicator-focus-size $kendo-component-border ), $inset: true ); } } diff --git a/packages/default/scss/switch/_theme.scss b/packages/default/scss/switch/_theme.scss index f5a64bc0fb1..83bfe4630f7 100644 --- a/packages/default/scss/switch/_theme.scss +++ b/packages/default/scss/switch/_theme.scss @@ -57,7 +57,11 @@ $kendo-switch-off-track-focus-border, $kendo-switch-off-track-focus-gradient ); - outline: $kendo-switch-off-track-focus-ring; + @if $kendo-enable-focus-contrast { + @include box-shadow( 0 0 0 2px if( $dark-theme, $kendo-color-white, $kendo-color-black ) ); + } @else { + outline: $kendo-switch-off-track-focus-ring; + } } } @@ -133,7 +137,11 @@ $kendo-switch-on-track-focus-border, $kendo-switch-on-track-focus-gradient ); - outline: $kendo-switch-on-track-focus-ring; + @if $kendo-enable-focus-contrast { + @include box-shadow( 0 0 0 2px if( $dark-theme, $kendo-color-white, $kendo-color-black ) ); + } @else { + outline: $kendo-switch-on-track-focus-ring; + } } } diff --git a/packages/default/scss/table/_theme.scss b/packages/default/scss/table/_theme.scss index c776e175c4e..f7170ad3480 100644 --- a/packages/default/scss/table/_theme.scss +++ b/packages/default/scss/table/_theme.scss @@ -69,7 +69,7 @@ border-color: $kendo-table-focus-border; color: $kendo-table-focus-text; background-color: $kendo-table-focus-bg; - box-shadow: $kendo-table-focus-shadow; + @include focus-indicator( $kendo-table-focus-shadow, inset ); } } diff --git a/packages/default/scss/tabstrip/_theme.scss b/packages/default/scss/tabstrip/_theme.scss index aa96eef0f40..7c95747283d 100644 --- a/packages/default/scss/tabstrip/_theme.scss +++ b/packages/default/scss/tabstrip/_theme.scss @@ -49,11 +49,11 @@ &:focus, &.k-focus { - @include box-shadow( $tabstrip-item-focus-shadow ); + @include focus-indicator( $tabstrip-item-focus-shadow, true ); } &.k-tabstrip-dragging { - @include box-shadow( $tabstrip-item-dragging-shadow ); + @include focus-indicator( $tabstrip-item-dragging-shadow ); } } diff --git a/packages/default/scss/taskboard/_theme.scss b/packages/default/scss/taskboard/_theme.scss index 175aad85e90..19f61259bd6 100644 --- a/packages/default/scss/taskboard/_theme.scss +++ b/packages/default/scss/taskboard/_theme.scss @@ -79,7 +79,7 @@ &:focus, &.k-focus { @include fill( $border: $taskboard-card-focus-border ); - @include box-shadow( $taskboard-card-focus-shadow ); + @include focus-indicator( $taskboard-card-focus-shadow ); } &:hover, diff --git a/packages/default/scss/tilelayout/_theme.scss b/packages/default/scss/tilelayout/_theme.scss index ecb2fb82e6c..ed07bd33d38 100644 --- a/packages/default/scss/tilelayout/_theme.scss +++ b/packages/default/scss/tilelayout/_theme.scss @@ -8,7 +8,7 @@ .k-tilelayout-item:focus, .k-tilelayout-item.k-focus { - @include box-shadow($tilelayout-card-focus-shadow); + @include focus-indicator($tilelayout-card-focus-shadow); } .k-layout-item-hint { diff --git a/packages/default/scss/timeline/_theme.scss b/packages/default/scss/timeline/_theme.scss index e907d7e1fc8..8902f8a7e79 100644 --- a/packages/default/scss/timeline/_theme.scss +++ b/packages/default/scss/timeline/_theme.scss @@ -62,6 +62,6 @@ } .k-timeline-track-item.k-focus .k-timeline-circle { - @include box-shadow( $timeline-track-item-focus-shadow ); + @include focus-indicator( $timeline-track-item-focus-shadow ); } } diff --git a/packages/default/scss/toolbar/_theme.scss b/packages/default/scss/toolbar/_theme.scss index cef86d71f06..1377511047b 100644 --- a/packages/default/scss/toolbar/_theme.scss +++ b/packages/default/scss/toolbar/_theme.scss @@ -21,7 +21,7 @@ // Template item .k-toolbar-item:focus, .k-toolbar-item.k-focus { - @include box-shadow( $kendo-toolbar-item-shadow ); + @include focus-indicator( $kendo-toolbar-item-shadow ); } @@ -72,7 +72,7 @@ // Button focus state &:focus, &.k-focus { - box-shadow: $kendo-menu-popup-item-focus-shadow; + @include focus-indicator( $kendo-menu-popup-item-focus-shadow, true ); } // Active state diff --git a/packages/default/scss/treeview/_theme.scss b/packages/default/scss/treeview/_theme.scss index 8ce79b6147d..0e09981662f 100644 --- a/packages/default/scss/treeview/_theme.scss +++ b/packages/default/scss/treeview/_theme.scss @@ -31,7 +31,7 @@ // Focus state &:focus, &.k-focus { - @include box-shadow( $kendo-treeview-item-focus-shadow ); + @include focus-indicator( $kendo-treeview-item-focus-shadow, true ); } // Selected state @@ -72,7 +72,7 @@ $kendo-treeview-loadmore-focus-bg, $kendo-treeview-loadmore-focus-border ); - @include box-shadow( $kendo-treeview-loadmore-focus-shadow ); + @include focus-indicator( $kendo-treeview-loadmore-focus-shadow, true ); } } diff --git a/packages/default/scss/upload/_theme.scss b/packages/default/scss/upload/_theme.scss index eb4133aa2fb..12b4eab0eb8 100644 --- a/packages/default/scss/upload/_theme.scss +++ b/packages/default/scss/upload/_theme.scss @@ -33,7 +33,11 @@ .k-file { &.k-focus { - box-shadow: inset $kendo-upload-focus-shadow; + @include focus-indicator( $indicator: ( inset $kendo-upload-focus-shadow ), $inset: true ); + } + + .k-upload-action.k-focus { + @include focus-indicator( $kendo-upload-focus-shadow ); } } diff --git a/packages/default/scss/window/_theme.scss b/packages/default/scss/window/_theme.scss index bf2478f07e8..90244ad3f8d 100644 --- a/packages/default/scss/window/_theme.scss +++ b/packages/default/scss/window/_theme.scss @@ -13,7 +13,7 @@ .k-window { &:focus, &.k-focus { - @include box-shadow( $kendo-window-focus-shadow ); + @include focus-indicator( $kendo-window-focus-shadow ); } } diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss index e3c488627ab..aa3b3e07c6b 100644 --- a/packages/material/scss/_variables.scss +++ b/packages/material/scss/_variables.scss @@ -7,6 +7,7 @@ $kendo-enable-rounded: true !default; $kendo-enable-shadows: true !default; $kendo-enable-gradients: false !default; $kendo-enable-transitions: true !default; +$kendo-enable-focus-contrast: false !default; $kendo-use-input-button-width: false !default; $kendo-use-input-spinner-width: false !default;