Skip to content

Commit

Permalink
feat: use focus-indicator mixin for contrast shadows
Browse files Browse the repository at this point in the history
  • Loading branch information
@Juveniel @joneff
Juveniel authored and joneff committed Jan 5, 2023
1 parent 191c4f5 commit 18560fe
Show file tree
Hide file tree
Showing 44 changed files with 126 additions and 94 deletions.
1 change: 1 addition & 0 deletions packages/bootstrap/scss/_variables.scss
View file
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions packages/classic/scss/_variables.scss
View file
Expand Up @@ -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;
Expand Down
7 changes: 7 additions & 0 deletions packages/core/scss/mixins/_focus-indicator.scss
View file
@@ -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... );
}
}
1 change: 1 addition & 0 deletions packages/core/scss/mixins/index.import.scss
View file
Expand Up @@ -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";
Expand Down
1 change: 1 addition & 0 deletions packages/default/scss/_variables.scss
View file
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/default/scss/action-sheet/_theme.scss
View file
Expand Up @@ -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 );
}


Expand Down
4 changes: 2 additions & 2 deletions packages/default/scss/breadcrumb/_theme.scss
View file
Expand Up @@ -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 );
}
}

Expand Down Expand Up @@ -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 );
}
}

Expand Down
8 changes: 4 additions & 4 deletions packages/default/scss/button/_theme.scss
View file
Expand Up @@ -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
Expand Down Expand Up @@ -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 );
}
}

Expand Down Expand Up @@ -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 );
}
}

Expand Down Expand Up @@ -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 );
}
}

Expand Down
6 changes: 3 additions & 3 deletions packages/default/scss/calendar/_theme.scss
View file
Expand Up @@ -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;
Expand Down Expand Up @@ -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 );
}


Expand Down
4 changes: 2 additions & 2 deletions packages/default/scss/card/_theme.scss
View file
Expand Up @@ -21,7 +21,7 @@
$card-focus-bg,
$card-focus-border
);
@include box-shadow( $card-focus-shadow );
@include focus-indicator( $card-focus-shadow );
}

&.k-selected {
Expand Down Expand Up @@ -80,7 +80,7 @@
&.k-focus,
&.k-selected {
> .k-card {
@include box-shadow( $card-focus-shadow );
@include focus-indicator( $card-focus-shadow );
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/default/scss/checkbox/_theme.scss
View file
Expand Up @@ -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 );
}


Expand All @@ -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 );
}


Expand Down
10 changes: 5 additions & 5 deletions packages/default/scss/chip/_theme.scss
View file
Expand Up @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -64,7 +64,7 @@

&:focus,
&.k-focus {
@include box-shadow( $kendo-chip-outline-shadow );
@include focus-indicator( $kendo-chip-outline-shadow );
}

&:hover,
Expand All @@ -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,
Expand All @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/default/scss/coloreditor/_theme.scss
View file
Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions packages/default/scss/colorgradient/_theme.scss
View file
Expand Up @@ -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
Expand All @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/default/scss/colorpalette/_theme.scss
View file
Expand Up @@ -5,7 +5,7 @@

&:focus,
&.k-focus {
@include box-shadow( $colorpalette-tile-focus-shadow );
@include focus-indicator( $colorpalette-tile-focus-shadow );
}

&:hover,
Expand Down
2 changes: 1 addition & 1 deletion packages/default/scss/drawer/_theme.scss
View file
Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions packages/default/scss/expansion-panel/_theme.scss
View file
Expand Up @@ -8,7 +8,7 @@
);

&.k-focus {
box-shadow: $expander-focus-shadow;
@include focus-indicator( $expander-focus-shadow, true );
}
}

Expand All @@ -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 );
}
}

Expand Down
20 changes: 14 additions & 6 deletions packages/default/scss/fab/_theme.scss
View file
Expand Up @@ -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 );
}
}
}

Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/default/scss/filter/_theme.scss
View file
Expand Up @@ -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 );
}
}

Expand Down
8 changes: 4 additions & 4 deletions packages/default/scss/grid/_theme.scss
View file
Expand Up @@ -95,7 +95,7 @@
.k-grid-pager {
&:focus,
&.k-focus {
box-shadow: $kendo-grid-focus-shadow;
@include focus-indicator( $kendo-grid-focus-shadow, true );
}
}

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -410,7 +410,7 @@

&:focus,
&.k-focus {
@include box-shadow( $kendo-list-item-focus-shadow );
@include focus-indicator( $kendo-list-item-focus-shadow, true );
}
}
}
Expand Down

0 comments on commit 18560fe

Please sign in to comment.