@progress/kendo-theme-default 5.12.1-dev.1 → 5.12.1-dev.2

package/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;
@@ -14,10 +15,6 @@ $kendo-use-input-spinner-icon-offset: false !default;
 
 
 // Spacing
-$spacer: 1em !default;
-$spacer-x: $spacer !default;
-$spacer-y: $spacer !default;
-
 $kendo-spacing: (
     // sass-lint:disable-block leading-zero
     0: 0,
@@ -60,16 +57,18 @@ $default-scrollbar-width: 17px !default;
 
 
 // Icons
-$icon-size: 16px !default;
-$icon-size-lg: 32px !default;
-$icon-spacing: k-map-get( $kendo-spacing, 1 ) !default;
-$icon-padding: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-icon-size: 16px !default;
 
-/// The URL to the icon font that will be used by the theme
-/// The default value of `null` embeds the package font with a `data:` URL
-/// @group icons
-$icon-font-url: null !default;
+$kendo-icon-size-xs: calc( #{$kendo-icon-size} * .75 ) !default;
+$kendo-icon-size-sm: calc( #{$kendo-icon-size} * .875 ) !default;
+$kendo-icon-size-md: $kendo-icon-size !default;
+$kendo-icon-size-lg: calc( #{$kendo-icon-size} * 1.25 ) !default;
+$kendo-icon-size-xl: calc( #{$kendo-icon-size} * 1.5 ) !default;
+$kendo-icon-size-xxl: calc( #{$kendo-icon-size} * 2 ) !default;
+$kendo-icon-size-xxxl: calc( #{$kendo-icon-size} * 3 ) !default;
 
+$kendo-icon-spacing: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-icon-padding: k-map-get( $kendo-spacing, 1 ) !default;
 
 // Metrics
 $kendo-padding-x: 8px !default;
@@ -87,6 +86,15 @@ $kendo-border-radius-sm: $kendo-border-radius - k-map-get( $kendo-spacing, 0.5 )
 $kendo-border-radius-md: $kendo-border-radius !default;
 $kendo-border-radius-lg: $kendo-border-radius + k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 
+$kendo-border-radii: (
+    DEFAULT: $kendo-border-radius-md,
+    0: 0,
+    sm: $kendo-border-radius-sm,
+    md: $kendo-border-radius-md,
+    lg: $kendo-border-radius-lg,
+    full: 9999px
+) !default;
+
 
 $kendo-zindex-popup: 1 !default;
 $kendo-zindex-window: 2 !default;
@@ -194,6 +202,53 @@ $kendo-theme-colors: (
 ) !default;
 
 
+// Typography
+
+/// Base font size across all components.
+/// @group typography
+$font-size: 14px !default;
+$font-size-xs: 10px !default;
+$font-size-sm: 12px !default;
+$font-size-md: $font-size !default;
+$font-size-lg: 16px !default;
+$font-size-xl: 20px !default;
+
+$kendo-font-sizes: (
+    xs: $font-size-xs,
+    sm: $font-size-sm,
+    md: $font-size-md,
+    lg: $font-size-lg,
+    xl: $font-size-xl
+) !default;
+
+/// Font family across all components.
+/// @group typography
+$font-family: inherit !default;
+
+/// Font family for monospaced text. Used for styling the code.
+/// @group typography
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
+
+/// Line height used along with $font-size.
+/// @group typography
+$line-height: k-math-div( 20, 14 ) !default;
+$line-height-xs: 1 !default;
+$line-height-sm: 1.25 !default;
+$line-height-md: $line-height !default;
+$line-height-lg: 1.5 !default;
+$line-height-em: calc( #{$line-height} * 1em ) !default;
+
+
+// Font weight
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-bold: 700 !default;
+
+
+// Letter Spacing
+$letter-spacing: null !default;
+
+
 // Root styles
 $kendo-body-bg: $kendo-color-white !default;
 $kendo-body-text: #424242 !default;
@@ -271,13 +326,9 @@ $kendo-disabled-styling: (
 ) !default;
 
 
-
 // Generic styles
 
 // TODO: refactor once we extract drag drop as separate module
-$font-size: 14px !default;
-$font-family: inherit !default;
-$line-height: k-math-div( 20, 14 ) !default;
 
 
 // Header

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

package/scss/action-sheet/_variables.scss

@@ -1,4 +1,5 @@
 // Action sheet
+
 $actionsheet-padding-x: null !default;
 $actionsheet-padding-y: null !default;
 $actionsheet-width: 360px !default;

package/scss/adaptive/_layout.scss

@@ -185,10 +185,6 @@
                     justify-content: space-evenly;
                     gap: 0;
                 }
-                .k-m-date-format {}
-                .k-y-date-format {
-                    font-size: 12px;
-                }
             }
 
             .k-scheduler-views-wrapper {

package/scss/badge/_index.scss

@@ -2,7 +2,7 @@
 
 
 // Dependencies
-@import "../utils/_position.scss";
+// @import "../utils/_position.scss";
 @import "../icons/_index.scss";
 
 

package/scss/bottom-navigation/_index.scss

@@ -3,7 +3,7 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_position.scss";
+// @import "../utils/_position.scss";
 @import "../icons/_index.scss";
 
 

package/scss/bottom-navigation/_variables.scss

@@ -13,7 +13,7 @@ $bottom-nav-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 $bottom-nav-item-padding-y: 0 !default;
 $bottom-nav-item-min-width: 72px !default;
 $bottom-nav-item-max-width: null !default;
-$bottom-nav-item-min-height: calc( #{$icon-size * 2.5} + #{$kendo-padding-md-x * 2} - #{$bottom-nav-padding-x * 2} ) !default;
+$bottom-nav-item-min-height: calc( #{$kendo-icon-size * 2.5} + #{$kendo-padding-md-x * 2} - #{$bottom-nav-padding-x * 2} ) !default;
 $bottom-nav-item-border-radius: $kendo-border-radius-md !default;
 $bottom-nav-item-gap: 0 k-map-get( $kendo-spacing, 1 ) !default;
 

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

package/scss/breadcrumb/_variables.scss

@@ -1,4 +1,8 @@
+@import "../typography/_variables.scss";
+
+
 // Breadcrumb
+
 $breadcrumb-margin-x: null !default;
 $breadcrumb-margin-y: null !default;
 $breadcrumb-padding-x: null !default;
@@ -13,7 +17,7 @@ $breadcrumb-bg: $kendo-component-bg !default;
 $breadcrumb-text: $kendo-component-text !default;
 $breadcrumb-border: $kendo-component-border !default;
 
-$breadcrumb-delimiter-icon-font-size: $icon-size * .75 !default;
+$breadcrumb-delimiter-icon-font-size: $kendo-icon-size * .75 !default;
 
 $breadcrumb-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 $breadcrumb-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
@@ -23,7 +27,7 @@ $breadcrumb-icon-link-padding-x: $breadcrumb-link-padding-x !default;
 $breadcrumb-icon-link-padding-y: $breadcrumb-icon-link-padding-x !default;
 
 $breadcrumb-root-link-spacing: $breadcrumb-link-padding-x !default;
-$breadcrumb-link-icon-spacing: $icon-spacing !default;
+$breadcrumb-link-icon-spacing: $kendo-icon-spacing !default;
 
 $breadcrumb-link-initial-text: inherit !default;
 

package/scss/button/_index.scss

@@ -4,7 +4,6 @@
 // Dependencies
 @import "../badge/_index.scss";
 @import "../icons/_index.scss";
-@import "../typography/_variables.scss";
 
 
 // Component

package/scss/button/_layout.scss

@@ -15,7 +15,7 @@
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        gap: $icon-spacing;
+        gap: $kendo-icon-spacing;
         vertical-align: middle;
         user-select: none;
         cursor: pointer;
@@ -181,7 +181,7 @@
 
         &:focus::after,
         &.k-focus::after {
-            opacity: .12;
+            opacity: $kendo-flat-button-focus-ring-opacity;
         }
     }
 

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

package/scss/button/_variables.scss

@@ -221,6 +221,9 @@ $kendo-flat-button-active-opacity: .16 !default;
 /// The overlay opacity of selected flat button. Used to create background for the flat button.
 /// @group button
 $kendo-flat-button-selected-opacity: .2 !default;
+/// The opacity of the flat button focus ring. Used to create border for the flat button.
+/// @group button
+$kendo-flat-button-focus-ring-opacity: .12 !default;
 
 /// The color transition of the flat button.
 /// @group button

package/scss/calendar/_layout.scss

@@ -491,10 +491,6 @@
     .k-rtl .k-calendar,
     .k-calendar[dir="rtl"] {
 
-        .k-nav-prev,
-        .k-nav-next,
-        .k-prev-view,
-        .k-next-view,
         .k-calendar-nav-prev,
         .k-calendar-nav-next {
             transform: scaleX(-1);

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

package/scss/calendar/_variables.scss

@@ -1,4 +1,8 @@
+@import "../typography/_variables.scss";
+
+
 // Calendar
+
 $calendar-border-width: 1px !default;
 $calendar-font-family: $font-family !default;
 $calendar-font-size: $font-size !default;

package/scss/captcha/_index.scss

@@ -2,7 +2,7 @@
 
 
 // Dependencies
-@import "../utils/_index.scss";
+// @import "../utils/_index.scss";
 @import "../common/_index.scss";
 @import "../icons/_index.scss";
 @import "../input/_index.scss";

package/scss/card/_index.scss

@@ -3,8 +3,8 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_flex.scss";
-@import "../utils/_grid.scss";
+// @import "../utils/_flex.scss";
+// @import "../utils/_grid.scss";
 @import "../action-buttons/_index.scss";
 @import "../icons/_index.scss";
 @import "../typography/_index.scss";

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

package/scss/checkbox/_index.scss

@@ -2,8 +2,6 @@
 
 
 // Dependencies
-@import "../typography/_variables.scss";
-@import "../list/_variables.scss";
 
 
 // Component

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

package/scss/checkbox/_variables.scss

@@ -1,3 +1,6 @@
+@import "../list/_variables.scss";
+
+
 // Checkbox
 
 /// Border width of checkbox.

package/scss/chip/_index.scss

@@ -3,7 +3,6 @@
 
 // Dependencies
 @import "../icons/_index.scss";
-@import "../button/_variables.scss";
 
 
 // Component

package/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,

package/scss/chip/_variables.scss

@@ -1,3 +1,6 @@
+@import "../button/_variables.scss";
+
+
 // Chip
 
 /// Width of the border around the button.

package/scss/color-preview/_layout.scss

@@ -39,7 +39,7 @@
         gap: 2px;
 
         .k-color-preview-mask {
-            width: calc( #{$icon-size} - 2px );
+            width: calc( #{$kendo-icon-size} - 2px );
             height: 2px;
         }
     }

package/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,

package/scss/colorgradient/_index.scss

@@ -3,8 +3,8 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_flex.scss";
-@import "../utils/_spacer.scss";
+// @import "../utils/_flex.scss";
+// @import "../utils/_spacer.scss";
 @import "../icons/_index.scss";
 @import "../button/_index.scss";
 @import "../slider/_index.scss";

package/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,

package/scss/colorpalette/_index.scss

@@ -3,7 +3,7 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_flex.scss";
+// @import "../utils/_flex.scss";
 
 
 // Component

package/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,

package/scss/common/_base.scss

@@ -143,7 +143,7 @@
 @include exports( "common/misc/hr" ) {
 
     .k-hr {
-        margin: $spacer-y auto;
+        margin: k-map-get( $kendo-spacing, 4 ) auto;
         padding: 0;
         height: 0;
         border-width: 1px 0 0;

package/scss/common/_index.scss

@@ -1,5 +1,3 @@
-@import "../typography/_variables.scss";
-
 @import "./_base.scss";
 @import "./_animations.scss";
 @import "./_resizing.scss";

package/scss/dataviz/_index.scss

@@ -5,7 +5,6 @@
 @import "../common/_index.scss";
 @import "../popup/_index.scss";
 @import "../tooltip/_index.scss";
-@import "../button/_variables.scss";
 
 
 // Component

package/scss/dataviz/_theme.scss

@@ -87,6 +87,8 @@
 
     .k-handle {
         cursor: e-resize;
+
+        // TODO: refactor and remove button dependency
         @include fill(
             $kendo-button-text,
             $kendo-button-bg,

package/scss/dataviz/_variables.scss

@@ -1,4 +1,8 @@
+@import "../button/_variables.scss";
+
+
 // Chart
+
 /// The first base series color and its light and dark shades.
 /// @group charts
 $series-a: #ff6358 !default;

package/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 {

package/scss/drawer/_variables.scss

@@ -23,7 +23,7 @@ $kendo-drawer-item-line-height: $line-height-lg !default;
 $kendo-drawer-item-level-padding-x: $kendo-drawer-item-padding-x !default;
 $kendo-drawer-item-level-count: 5 !default;
 
-$kendo-drawer-icon-size: $icon-size !default;
+$kendo-drawer-icon-size: $kendo-icon-size !default;
 
 $kendo-drawer-mini-initial-width: calc(2 * #{$kendo-drawer-item-padding-x} + #{$kendo-drawer-icon-size}) !default;
 

package/scss/dropdowngrid/_index.scss

@@ -3,17 +3,14 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../table/_index.scss";
-@import "../input/_index.scss";
 @import "../floating-label/_index.scss";
-@import "../combobox/_index.scss";
+@import "../icons/_index.scss";
+@import "../input/_index.scss";
 @import "../popup/_index.scss";
-@import "../toolbar/_variables.scss";
-@import "../menu/_variables.scss";
-@import "../chip/_variables.scss";
-@import "../grid/_variables.scss";
+@import "../table/_index.scss";
 
 
 // Component
+@import "./_variables.scss";
 @import "./_layout.scss";
 @import "./_theme.scss";

package/scss/dropdowngrid/_variables.scss

@@ -0,0 +1 @@
+// Dropdown grid