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

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

@@ -67,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;

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/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};
+    }
+}