@progress/kendo-theme-core 13.2.0-dev.3 → 14.0.0-dev.0

package/scss/components/overlay/_theme.scss

@@ -1,25 +1,8 @@
-@use "../../color-system/_functions.scss" as *;
-@use "../../functions/default.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-overlay--theme-base() {
     // Overlay
     .k-overlay {
-        @each $name in $kendo-overlay-theme-colors {
-            #{k-when-default($kendo-overlay-default-theme-color, $name)}
-            &.k-overlay-#{$name} {
-                background-color: k-color(#{$name});
-            }
-        }
-
         background-color: $kendo-overlay-bg;
     }
-
-    // Where single k-overlay-{color} is used as a theme element
-    @each $name in $kendo-overlay-theme-colors {
-        .k-overlay-#{$name} {
-            background-color: k-color(#{$name});
-        }
-    }
-
 }

package/scss/components/overlay/_variables.scss

@@ -1,8 +1,3 @@
-$kendo-overlay-default-theme-color: null !default;
-
 $kendo-overlay-bg: null !default;
 $kendo-overlay-opacity: null !default;
 
-/// The theme colors map of the Overlay.
-/// @group overlay
-$kendo-overlay-theme-colors: ("dark", "light", "inverse") !default;

package/scss/components/pdf-viewer/_layout.scss

@@ -8,6 +8,7 @@
     // PDF Viewer
     .k-pdf-viewer {
         border-width: $kendo-pdf-viewer-border-width;
+        border-radius: $kendo-pdf-viewer-border-radius;
         border-style: solid;
         box-sizing: border-box;
         position: relative;

package/scss/components/pdf-viewer/_variables.scss

@@ -1,6 +1,7 @@
 // PDFViewer
 
 $kendo-pdf-viewer-border-width: null !default;
+$kendo-pdf-viewer-border-radius: null !default;
 $kendo-pdf-viewer-font-family: null !default;
 $kendo-pdf-viewer-font-size: null !default;
 $kendo-pdf-viewer-line-height: null !default;

package/scss/components/pivotgrid/_layout.scss

@@ -12,6 +12,7 @@
         padding-inline: $kendo-pivotgrid-padding-x;
         border-width: $kendo-pivotgrid-border-width;
         border-style: solid;
+        border-radius: $kendo-pivotgrid-border-radius;
         box-sizing: content-box;
         font-size: $kendo-pivotgrid-font-size;
         font-family: $kendo-pivotgrid-font-family;
@@ -22,6 +23,7 @@
         grid-template-columns: $kendo-pivotgrid-row-header-width auto;
         grid-template-rows: $kendo-pivotgrid-column-header-height auto;
         position: relative;
+        overflow: hidden;
 
         table {
             margin: 0;
@@ -170,6 +172,7 @@
     // Pivotgrid configurator
     .k-pivotgrid-configurator {
         display: flex;
+        border-radius: $kendo-pivotgrid-border-radius;
     }
 
     .k-pivotgrid-configurator-panel {
@@ -182,6 +185,7 @@
         flex-direction: column;
         overflow: hidden;
         z-index: k-z-index("base", 2);
+        border-radius: inherit;
     }
 
     // Configurator Button
@@ -190,6 +194,7 @@
         padding-inline: $kendo-pivotgrid-configurator-button-padding-x;
         border-width: $kendo-pivotgrid-configurator-button-border-width;
         border-style: solid;
+        border-radius: $kendo-pivotgrid-border-radius;
         box-sizing: border-box;
         cursor: pointer;
         user-select: none;
@@ -228,6 +233,7 @@
         padding-inline: $kendo-pivotgrid-configurator-content-padding-x;
         flex: 1 1 auto;
         overflow: auto;
+        border-radius: inherit;
 
         .k-form {
             .k-label {
@@ -470,9 +476,11 @@
     // Legacy pivotgrid
     // TODO: remove
     .k-pivot {
+        border-radius: $kendo-pivotgrid-border-radius;
         border-width: $kendo-pivotgrid-border-width;
         border-style: solid;
         position: relative;
+        overflow: hidden;
 
         .k-grid td {
             white-space: nowrap;

package/scss/components/pivotgrid/_variables.scss

@@ -6,6 +6,7 @@ $kendo-pivotgrid-font-family: null !default;
 $kendo-pivotgrid-font-size: null !default;
 $kendo-pivotgrid-line-height: null !default;
 $kendo-pivotgrid-border-width: null !default;
+$kendo-pivotgrid-border-radius: null !default;
 $kendo-pivotgrid-icon-spacing: null !default;
 
 $kendo-pivotgrid-row-header-width: null !default;

package/scss/components/progressbar/_layout.scss

@@ -56,6 +56,7 @@
             grid-row: 1 / -1;
         }
         .k-progressbar-chunk {
+            border-radius: $kendo-progressbar-chunk-border-radius;
             display: block;
             border-width: 0;
             flex: 1;

package/scss/components/progressbar/_variables.scss

@@ -22,6 +22,9 @@ $kendo-progressbar-indeterminate-bg: null !default;
 $kendo-progressbar-indeterminate-text: null !default;
 $kendo-progressbar-indeterminate-border: null !default;
 
+// Chunk Progressbar
+$kendo-progressbar-chunk-border-radius: null !default;
+
 // Circular Progressbar
 $kendo-circular-progressbar-arc-stroke: null !default;
 $kendo-circular-progressbar-scale-stroke: null !default;

package/scss/components/prompt/_theme.scss

@@ -37,4 +37,12 @@
         @include box-shadow( $kendo-prompt-suggestion-shadow );
     }
 
+    .k-prompt-footer {
+        @include fill(
+            $kendo-prompt-footer-text,
+            $kendo-prompt-footer-bg,
+            $kendo-prompt-footer-border
+        );
+    }
+
 }

package/scss/components/prompt/_variables.scss

@@ -24,3 +24,7 @@ $kendo-prompt-suggestion-text: null !default;
 $kendo-prompt-suggestion-bg: null !default;
 $kendo-prompt-suggestion-border: null !default;
 $kendo-prompt-suggestion-shadow: null !default;
+
+$kendo-prompt-footer-text: null !default;
+$kendo-prompt-footer-bg: null !default;
+$kendo-prompt-footer-border: null !default;

package/scss/components/scheduler/_layout.scss

@@ -13,6 +13,7 @@
     // Layout
     .k-scheduler {
         border-width: $kendo-scheduler-border-width;
+        border-radius: $kendo-scheduler-border-radius;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
@@ -22,6 +23,7 @@
         display: flex;
         flex-direction: column;
         position: relative;
+        overflow: hidden;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 

package/scss/components/scheduler/_variables.scss

@@ -1,6 +1,7 @@
 // Scheduler
 
 $kendo-scheduler-border-width: null !default;
+$kendo-scheduler-border-radius: null !default;
 $kendo-scheduler-font-family: null !default;
 $kendo-scheduler-font-size: null !default;
 $kendo-scheduler-line-height: null !default;

package/scss/components/scrollview/_layout.scss

@@ -7,6 +7,7 @@
     .k-scrollview {
         border-width: $kendo-scrollview-border-width;
         border-style: solid;
+        border-radius: $kendo-scrollview-border-radius;
         box-sizing: border-box;
         outline: 0;
         font-family: $kendo-scrollview-font-family;

package/scss/components/scrollview/_theme.scss

@@ -74,6 +74,16 @@
         &.k-primary {
             background: $kendo-scrollview-pagebutton-primary-bg;
             border: $kendo-scrollview-pagebutton-primary-border;
+
+            &:focus,
+            &.k-focus {
+                @include focus-indicator( $kendo-scrollview-pagebutton-primary-shadow );
+            }
+
+            &:hover,
+            &.k-hover {
+                box-shadow: $kendo-scrollview-pagebutton-primary-shadow;
+            }
         }
 
         &:focus,

package/scss/components/scrollview/_variables.scss

@@ -1,6 +1,7 @@
 // ScrollView
 
 $kendo-scrollview-border-width: null !default;
+$kendo-scrollview-border-radius: null !default;
 $kendo-scrollview-font-family: null !default;
 $kendo-scrollview-font-size: null !default;
 $kendo-scrollview-line-height: null !default;
@@ -15,6 +16,7 @@ $kendo-scrollview-pagebutton-border: null !default;
 $kendo-scrollview-pagebutton-primary-bg: null !default;
 $kendo-scrollview-pagebutton-primary-border: null !default;
 $kendo-scrollview-pagebutton-shadow: null !default;
+$kendo-scrollview-pagebutton-primary-shadow: null !default;
 
 $kendo-scrollview-pager-offset: null !default;
 $kendo-scrollview-pager-item-spacing: null !default;

package/scss/components/spreadsheet/_layout.scss

@@ -18,6 +18,7 @@
         height: 600px;
         border-width: $kendo-spreadsheet-border-width;
         border-style: solid;
+        border-radius: $kendo-spreadsheet-border-radius;
         box-sizing: border-box;
         outline: 0;
         font-family: $kendo-spreadsheet-font-family;
@@ -42,6 +43,11 @@
         }
     }
 
+    // Header
+    .k-spreadsheet-header {
+        @include border-top-radius(inherit);
+    }
+
     // Toolbar
     .k-spreadsheet-toolbar {
         border-block-start-width: 0;
@@ -168,6 +174,7 @@
         border-width: $kendo-spreadsheet-sheets-bar-border-width 0 0;
         border-style: solid;
         border-color: inherit;
+        @include border-bottom-radius(inherit);
         display: flex;
         flex-direction: row;
         align-items: center;

package/scss/components/spreadsheet/_variables.scss

@@ -1,6 +1,7 @@
 // Spreadsheet
 
 $kendo-spreadsheet-border-width: null !default;
+$kendo-spreadsheet-border-radius: null !default;
 $kendo-spreadsheet-font-family: null !default;
 $kendo-spreadsheet-font-size: null !default;
 $kendo-spreadsheet-line-height: null !default;

package/scss/components/stepper/_layout.scss

@@ -140,7 +140,7 @@
         }
 
         .k-step-current .k-step-label {
-            font-weight: bold;
+            font-weight: $kendo-stepper-label-current-font-weight;
         }
 
 

package/scss/components/stepper/_variables.scss

@@ -71,6 +71,7 @@ $kendo-stepper-indicator-current-disabled-text: null !default;
 $kendo-stepper-indicator-current-disabled-border: null !default;
 
 $kendo-stepper-label-text: null !default;
+$kendo-stepper-label-current-font-weight: null !default;
 $kendo-stepper-label-success-text: null !default;
 $kendo-stepper-label-error-text: null !default;
 $kendo-stepper-label-hover-text: null !default;

package/scss/components/suggestion/_layout.scss

@@ -16,6 +16,7 @@
 
     .k-suggestion-group {
         padding-block: calc( #{$kendo-suggestion-padding-y} / 2 );
+        margin-inline: calc( #{$kendo-suggestion-padding-y} / -2 );
         display: flex;
         flex: 1;
         flex-wrap: wrap;
@@ -27,8 +28,12 @@
             flex-wrap: nowrap;
         }
 
+        &:not(:has(.k-suggestions-scroll)) {
+            padding-inline: calc( #{$kendo-suggestion-padding-y} / 2 );
+        }
+
         .k-suggestions-scroll {
-            padding-block: calc( #{$kendo-suggestion-padding-y} / 2 );
+            padding: calc( #{$kendo-suggestion-padding-y} / 2 );
             margin-block: calc( #{$kendo-suggestion-padding-y} / -2 );
             display: flex;
             overflow-x: auto;
@@ -62,6 +67,7 @@
         border-style: $kendo-suggestion-border-style;
         font-size: $kendo-suggestion-font-size;
         line-height: $kendo-suggestion-line-height;
+        font-weight: $kendo-suggestion-font-weight;
         flex: 0 0 auto;
         transition: background-color k-transition(rapid), box-shadow k-transition(rapid);
         cursor: pointer;

package/scss/components/suggestion/_variables.scss

@@ -7,6 +7,7 @@ $kendo-suggestion-border-style: null !default;
 
 $kendo-suggestion-font-size: null !default;
 $kendo-suggestion-line-height: null !default;
+$kendo-suggestion-font-weight: null !default;
 $kendo-suggestion-border-radius: null !default;
 
 $kendo-suggestion-focus-shadow-blur: null !default;
@@ -15,7 +16,7 @@ $kendo-suggestion-focus-shadow-color: null !default;
 
 /// The theme colors map of the Suggestion.
 /// @group suggestion
-$kendo-suggestion-theme-colors: ("base", "primary", "secondary") !default;
+$kendo-suggestion-theme-colors: ("base", "primary", "secondary", "tertiary") !default;
 
 $kendo-suggestion-default-theme-color: null !default;
 

package/scss/components/table/_variables.scss

@@ -19,24 +19,33 @@ $kendo-table-md-cell-padding-y: null !default;
 $kendo-table-lg-cell-padding-x: null !default;
 $kendo-table-lg-cell-padding-y: null !default;
 
+$kendo-table-sm-font-size: null !default;
+$kendo-table-sm-line-height: null !default;
+
+$kendo-table-md-font-size: null !default;
+$kendo-table-md-line-height: null !default;
+
+$kendo-table-lg-font-size: null !default;
+$kendo-table-lg-line-height: null !default;
+
 /// The sizes map of the Table.
 /// @group table
 $kendo-table-sizes: (
     sm: (
-        font-size: var(--kendo-font-size),
-        line-height: var(--kendo-line-height),
+        font-size: $kendo-table-sm-font-size,
+        line-height: $kendo-table-sm-line-height,
         cell-padding-x: $kendo-table-sm-cell-padding-x,
         cell-padding-y: $kendo-table-sm-cell-padding-y
     ),
     md: (
-        font-size: var(--kendo-font-size),
-        line-height: var(--kendo-line-height),
+        font-size: $kendo-table-md-font-size,
+        line-height: $kendo-table-md-line-height,
         cell-padding-x: $kendo-table-md-cell-padding-x,
         cell-padding-y: $kendo-table-md-cell-padding-y
     ),
     lg: (
-        font-size: var(--kendo-font-size),
-        line-height: var(--kendo-line-height),
+        font-size: $kendo-table-lg-font-size,
+        line-height: $kendo-table-lg-line-height,
         cell-padding-x: $kendo-table-lg-cell-padding-x,
         cell-padding-y: $kendo-table-lg-cell-padding-y
     )

package/scss/components/taskboard/_layout.scss

@@ -121,6 +121,7 @@
         padding-inline: $kendo-taskboard-pane-padding-x;
         width: $kendo-taskboard-pane-width;
         border-width: $kendo-taskboard-pane-border-width;
+        border-radius: $kendo-taskboard-pane-border-radius;
         border-style: solid;
         display: flex;
         flex-direction: column;

package/scss/components/taskboard/_variables.scss

@@ -50,6 +50,7 @@ $kendo-taskboard-pane-width: null !default;
 $kendo-taskboard-pane-padding-y: null !default;
 $kendo-taskboard-pane-padding-x: null !default;
 $kendo-taskboard-pane-border-width: null !default;
+$kendo-taskboard-pane-border-radius: null !default;
 $kendo-taskboard-pane-bg: null !default;
 $kendo-taskboard-pane-text: null !default;
 $kendo-taskboard-pane-border: null !default;

package/scss/components/timeline/_theme.scss

@@ -16,6 +16,10 @@
         }
 
         .k-timeline-card {
+            .k-card {
+                box-shadow: $kendo-timeline-card-shadow;
+            }
+
             .k-card-header {
                 background-color: $kendo-card-bg;
                 color: $kendo-card-text;

package/scss/components/timeline/_variables.scss

@@ -62,6 +62,8 @@ $kendo-timeline-circle-bg: null !default;
 
 $kendo-timeline-collapse-arrow-padding-x: null !default;
 
+$kendo-timeline-card-shadow: null !default;
+
 $kendo-timeline-event-width: null !default;
 $kendo-timeline-event-height: null !default;
 $kendo-timeline-event-min-height-calc: null !default;

package/scss/components/toolbar/_layout.scss

@@ -16,6 +16,7 @@
         margin: 0;
         border-width: $kendo-toolbar-border-width;
         border-style: solid;
+        border-radius: $kendo-toolbar-border-radius;
         box-sizing: border-box;
         outline: 0;
         font-family: $kendo-toolbar-font-family;

package/scss/components/toolbar/_variables.scss

@@ -21,6 +21,7 @@ $kendo-toolbar-md-separator-height: null !default;
 $kendo-toolbar-lg-separator-height: null !default;
 
 $kendo-toolbar-border-width: null !default;
+$kendo-toolbar-border-radius: null !default;
 
 $kendo-toolbar-font-family: null !default;
 $kendo-toolbar-font-size: null !default;

package/scss/components/upload/_layout.scss

@@ -9,8 +9,10 @@
     .k-upload {
         border-width: $kendo-upload-border-width;
         border-style: solid;
+        border-radius: $kendo-upload-border-radius;
         box-sizing: border-box;
         outline: 0;
+        overflow: clip;
         font-family: $kendo-upload-font-family;
         font-size: $kendo-upload-font-size;
         line-height: $kendo-upload-line-height;

package/scss/components/upload/_variables.scss

@@ -1,6 +1,7 @@
 // Upload
 
 $kendo-upload-border-width: null !default;
+$kendo-upload-border-radius: null !default;
 $kendo-upload-font-family: null !default;
 $kendo-upload-font-size: null !default;
 $kendo-upload-line-height: null !default;

package/scss/components/window/_theme.scss

@@ -14,18 +14,6 @@
             $kendo-window-border
         );
         @include box-shadow( $kendo-window-shadow );
-
-        // Window theme colors
-        @each $name in $kendo-window-theme-colors {
-
-            #{k-when-default($kendo-window-default-theme-color, $name)}
-            &.k-window-#{$name} {
-                .k-window-titlebar {
-                    color: k-color(on-#{$name});
-                    background-color: k-color(#{$name});
-                }
-            }
-        }
     }
 
     .k-window:focus,

package/scss/components/window/_variables.scss

@@ -1,6 +1,5 @@
 // Window
 
-$kendo-window-default-theme-color: null !default;
 $kendo-window-default-size: null !default;
 
 $kendo-window-border-width: null !default;
@@ -47,7 +46,3 @@ $kendo-window-sizes: (
     md: 800px,
     lg: 1200px
 ) !default;
-
-/// The theme colors map of the Window.
-/// @group window
-$kendo-window-theme-colors: ("primary", "light", "dark") !default;

package/scss/elevation/index.scss

@@ -71,19 +71,6 @@ $kendo-elevation-bg-chroma-step: 0.001 !default;
     @return #{$_result};
 }
 
-// Each elevation-border level increases border opacity by level * this value (in %).
-$kendo-elevation-border-opacity-step: 10 !default;
-
-// The border color for a given elevation level is calculated by increasing the alpha of the base border color
-// by a step multiplied by the elevation level, but only if the base border color is light (for dark themes) or dark (for light themes).
-// This is achieved by multiplying the step by a clamp function that returns 1 when the border color is in the appropriate range and 0 otherwise.
-// clamp(0, (l - 0.5) * 99999, 1) → 1 when border is light (dark theme), 0 when dark (light theme)
-// alpha is a <number> (0..1), so we divide the step by 100 instead of multiplying by 1%
-@function k-elevation-border($level, $color) {
-    $_result: "oklch(from #{$color} l c h / calc(alpha + #{$level} * #{$kendo-elevation-border-opacity-step} / 100 * clamp(0, (l - 0.5) * 99999, 1)))";
-    @return #{$_result};
-}
-
 
 @mixin kendo-elevation--styles() {
     :root {

package/scss/index.scss

@@ -3,6 +3,7 @@
 @forward "./mixins/index.scss";
 @forward "./spacing/index.scss";
 @forward "./elevation/index.scss";
+@forward "./translucency/index.scss";
 @forward "./typography/index.scss";
 @forward "./border-radii/index.scss";
 @forward "./motion/index.scss";
@@ -12,6 +13,7 @@
 @use "./color-system/index.scss" as *;
 @use "./mixins/index.scss" as *;
 @use "./elevation/index.scss" as *;
+@use "./translucency/index.scss" as *;
 @use "./typography/index.scss" as *;
 @use "./spacing/index.scss" as *;
 @use "./motion/index.scss" as *;

package/scss/mixins/_focus-indicator.scss

@@ -2,8 +2,11 @@
 @use "../_variables.scss" as *;
 @use "./_box-shadow.scss" as *;
 
-@mixin focus-indicator( $indicator, $inset: false, $themeable: false, $type: "box-shadow" ) {
-    @if $kendo-enable-focus-contrast and list.nth($indicator, 1) {
+@mixin focus-indicator( $indicator, $inset: false, $themeable: false, $type: "box-shadow", $outline-width: 1px, $outline-offset: 0px ) {
+    @if $type == "outline" {
+        outline: var(--kendo-focus-outline-width, $outline-width) solid $indicator;
+        outline-offset: if( $inset, calc(-1 * var(--kendo-focus-outline-offset, $outline-offset)), var(--kendo-focus-outline-offset, $outline-offset));
+    } @else if $kendo-enable-focus-contrast and 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... );

package/scss/translucency/index.scss

@@ -0,0 +1,20 @@
+$kendo-translucency-base: 0% !default;
+
+@function k-translucency-bg($color) {
+    $_result: "oklch(from #{$color} l c h / calc(100% - calc(var(--kendo-translucency-base))))";
+    @return #{$_result};
+}
+
+$kendo-translucency-blur-base: 6px !default;
+$kendo-translucency-blur-step: 2px !default;
+
+@function k-translucency-blur($level: 1) {
+    $_result: "blur(calc(#{$kendo-translucency-blur-base} + calc(#{$level} * #{$kendo-translucency-blur-step})))";
+    @return #{$_result};
+}
+
+@mixin kendo-translucency--styles() {
+    :root {
+        --kendo-translucency-base: #{$kendo-translucency-base};
+    }
+}