@progress/kendo-theme-fluent 5.8.2-dev.6 → 5.9.1-dev.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "5.8.2-dev.6",
+  "version": "5.9.1-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -44,11 +44,11 @@
     "postpublish": "echo 'no postpublish for the Fluent theme'"
   },
   "dependencies": {
-    "@progress/kendo-font-icons": "^0.4.0",
-    "@progress/kendo-theme-utils": "^5.8.2-dev.6"
+    "@progress/kendo-font-icons": "^0.6.0",
+    "@progress/kendo-theme-utils": "^5.9.1-dev.0"
   },
   "devDependencies": {
     "sass-build": "^1.0.0"
   },
-  "gitHead": "b1b2e33a3ce1b92bcefae87e8c46cbd797d814d1"
+  "gitHead": "5142573d2cab52d118015f12686449f974b66732"
 }

package/scss/calendar/_layout.scss

@@ -1,4 +1,3 @@
-@use "sass:math";
 @use "../core/color-system" as *;
 @use "../core/mixins" as *;
 @use "_variables.scss" as *;
@@ -9,6 +8,8 @@
 
     // Base
     .k-calendar {
+        inline-size: var( --INTERNAL--kendo-calendar-width, min-content );
+        block-size: var( --INTERNAL--kendo-calendar-height, min-content );
         border-width: var( --kendo-calendar-border-width, #{$kendo-calendar-border-width} );
         border-style: solid;
         box-sizing: border-box;
@@ -41,7 +42,7 @@
 
     // Calendar table
     .k-calendar-table {
-        margin: 0;
+        margin: 0 auto;
         border-width: 0;
         border-color: inherit;
         border-spacing: 0;
@@ -49,8 +50,7 @@
         table-layout: fixed;
         text-align: center;
         outline: 0;
-        display: inline-table;
-        vertical-align: top;
+        display: table;
         position: relative;
         z-index: 1;
     }
@@ -94,8 +94,29 @@
 
     .k-calendar-td {
         @include border-radius( var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ));
+        inline-size: var( --INTERNAL--kendo-calendar-cell-size, min-content );
+        block-size: var( --INTERNAL--kendo-calendar-cell-size, min-content );
         border-color: transparent;
-        font-size: var( --kendo-calendar-cell-font-size, #{$kendo-calendar-cell-font-size} );
+        font-size: var( --INTERNAL--kendo-calendar-cell-font-size, inherit );
+    }
+
+
+    // Calendar cell inner
+    // Remove .k-calendar once we remove k-link
+    .k-calendar .k-calendar-cell-inner {
+        @include border-radius( var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ) );
+        padding-inline: var( --INTERNAL--kendo-calendar-cell-padding-x, 0 );
+        padding-block: var( --INTERNAL--kendo-calendar-cell-padding-y, 0 );
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        white-space: normal;
+        position: relative;
+        overflow: hidden;
     }
 
 
@@ -163,7 +184,7 @@
         padding-inline: var( --kendo-calendar-header-padding-x, #{$kendo-calendar-header-padding-x} );
         padding-block-end: var( --kendo-calendar-view-padding-block-end, #{$kendo-calendar-view-padding-block-end} );
         // setting width / height prevents layout changes in meta views
-        width: $kendo-calendar-view-width;
+        inline-size: var( --INTERNAL--kendo-calendar-view-width, #{$kendo-calendar-view-width});
         min-height: $kendo-calendar-view-height;
         box-sizing: content-box;
         gap: var( --kendo-calendar-view-gap, #{$kendo-calendar-view-gap} );
@@ -173,81 +194,80 @@
 
         .k-link {
             @include border-radius( var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ) );
-            padding-inline: var( --kendo-calendar-cell-padding-x, #{$kendo-calendar-cell-padding-x} );
-            padding-block: var( --kendo-calendar-cell-padding-y, #{$kendo-calendar-cell-padding-y} );
+            padding-inline: var( --INTERNAL--kendo-calendar-cell-padding-x, 0 );
+            padding-block: var( --INTERNAL--kendo-calendar-cell-padding-y, 0 );
+            width: 100%;
+            height: 100%;
             box-sizing: border-box;
             display: flex;
             flex-direction: row;
             align-items: center;
             justify-content: center;
-
+            white-space: normal;
+            position: relative;
+            overflow: hidden;
         }
 
         .k-today .k-link {
             @include border-radius( var( --kendo-calendar-today-border-radius, #{$kendo-calendar-today-border-radius} ) );
         }
     }
-    .k-week-number .k-calendar-view {
-        width: calc( 8 * var( --kendo-calendar-cell-size, #{$kendo-calendar-cell-size} ));
-    }
 
 
     // Month view
+    .k-month-calendar,
     .k-calendar-monthview {
-        $_month-cell-size: var( --kendo-calendar-cell-size, #{$kendo-calendar-cell-size} );
+        $_month-cell-size: $kendo-calendar-cell-size;
 
         .k-calendar-td {
             width: $_month-cell-size;
             height: $_month-cell-size;
-        }
-        .k-link {
-            width: $_month-cell-size;
-            height: $_month-cell-size;
+            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} );
+            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} );
         }
     }
 
 
     // Year view
+    .k-year-calendar,
     .k-calendar-yearview {
-        $_year-cell-size: calc( math.div(7, 4) * var( --kendo-calendar-cell-size, #{$kendo-calendar-cell-size} ));
+        $_year-cell-size: ( 2 * $kendo-calendar-cell-size );
 
         .k-calendar-td {
-            width: auto;
-            height: auto;
-        }
-        .k-link {
             width: $_year-cell-size;
             height: $_year-cell-size;
+            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
+            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
         }
     }
 
 
     // Decade view
+    .k-decade-calendar,
     .k-calendar-decadeview {
-        $_decade-cell-size: calc( math.div(7, 4) * var( --kendo-calendar-cell-size, #{$kendo-calendar-cell-size} ));
+        $_decade-cell-size: ( 2 * $kendo-calendar-cell-size );
 
         .k-calendar-td {
-            width: auto;
-            height: auto;
-        }
-        .k-link {
             width: $_decade-cell-size;
             height: $_decade-cell-size;
+            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
+            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
         }
     }
 
 
     // Century view
+    .k-century-calendar,
     .k-calendar-centuryview {
-        $_century-cell-size: calc( math.div(7, 4) * var( --kendo-calendar-cell-size, #{$kendo-calendar-cell-size} ));
+        $_century-cell-size: ( 2 * $kendo-calendar-cell-size );
 
         .k-calendar-td {
-            width: auto;
-            height: auto;
-        }
-        .k-link {
             width: $_century-cell-size;
             height: $_century-cell-size;
+            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
+            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
+        }
+        .k-link {
             text-align: left;
         }
     }
@@ -441,6 +461,51 @@
     }
 
 
+
+
+    // Calendar sizes
+    @each $size, $size-props in $kendo-calendar-sizes {
+        $_font-size: map-get( $size-props, font-size );
+        $_line-height: map-get( $size-props, line-height );
+        $_cell-size: map-get( $size-props, cell-size );
+        $_cell-padding-x: map-get( $size-props, cell-padding-x );
+        $_cell-padding-y: map-get( $size-props, cell-padding-y );
+        $_cell-font-size: map-get( $size-props, cell-font-size );
+
+        $_month-cell-size: $_cell-size;
+        $_year-cell-size: ( 2 * $_cell-size );
+        $_decade-cell-size: ( 2 * $_cell-size );
+        $_century-cell-size: ( 2 * $_cell-size );
+
+        .k-calendar-#{$size} {
+            --INTERNAL--kendo-calendar-view-width: #{8 * $_cell-size};
+            --INTERNAL--kendo-calendar-cell-padding-x: var( --kendo-calendar-#{$size}-cell-padding-x, #{$_cell-padding-x} );
+            --INTERNAL--kendo-calendar-cell-padding-y: var( --kendo-calendar-#{$size}-cell-padding-y, #{$_cell-padding-y} );
+            --INTERNAL--kendo-calendar-cell-font-size: var( --kendo-calendar-#{$size}-cell-font-size, #{$_cell-font-size} );
+            font-size: $_font-size;
+            line-height: $_line-height;
+
+            &.k-month-calendar,
+            .k-calendar-monthview {
+                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-month-cell-size, #{$_month-cell-size} );
+            }
+            &.k-year-calendar,
+            .k-calendar-yearview {
+                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-year-cell-size, #{$_year-cell-size} );
+            }
+            &.k-decade-calendar,
+            .k-calendar-decadeview {
+                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-decade-cell-size, #{$_decade-cell-size} );
+            }
+            &.k-century-calendar,
+            .k-calendar-centuryview {
+                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-century-cell-size, #{$_century-cell-size} );
+            }
+        }
+    }
+
+
+    // RTL
     .k-rtl .k-calendar,
     .k-calendar[dir="rtl"] {
 

package/scss/calendar/_variables.scss

@@ -264,4 +264,54 @@ $kendo-calendar-range-bg: get-theme-color-var( neutral-30 ) !default;
 $kendo-calendar-range-text: inherit !default;
 /// Border color of the range selection in the calendar.
 /// @group calendar
-$kendo-calendar-range-border: get-theme-color-var( neutral-130 )  !default;
+$kendo-calendar-range-border: get-theme-color-var( neutral-130 ) !default;
+
+
+// Calendar sizes
+$kendo-calendar-sm-font-size: $kendo-font-size-sm !default;
+$kendo-calendar-sm-line-height: $kendo-line-height-sm !default;
+$kendo-calendar-sm-cell-size: 24px !default;
+$kendo-calendar-sm-cell-padding-x: map-get( $kendo-spacing, thin) !default;
+$kendo-calendar-sm-cell-padding-y: map-get( $kendo-spacing, thin) !default;
+$kendo-calendar-sm-cell-font-size: $kendo-font-size-sm !default;
+
+$kendo-calendar-md-font-size: $kendo-font-size-md !default;
+$kendo-calendar-md-line-height: $kendo-line-height-md !default;
+$kendo-calendar-md-cell-size: 28px !default;
+$kendo-calendar-md-cell-padding-x: map-get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-md-cell-padding-y: map-get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-md-cell-font-size: $kendo-font-size-sm !default;
+
+$kendo-calendar-lg-font-size: $kendo-font-size-md !default;
+$kendo-calendar-lg-line-height: $kendo-line-height-md !default;
+$kendo-calendar-lg-cell-size: 32px !default;
+$kendo-calendar-lg-cell-padding-x: map-get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-lg-cell-padding-y: map-get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-lg-cell-font-size: $kendo-font-size-md !default;
+
+$kendo-calendar-sizes: (
+    sm: (
+        font-size: $kendo-calendar-sm-font-size,
+        line-height: $kendo-calendar-sm-line-height,
+        cell-size: $kendo-calendar-sm-cell-size,
+        cell-padding-x: $kendo-calendar-sm-cell-padding-y,
+        cell-padding-y: $kendo-calendar-sm-cell-padding-x,
+        cell-font-size: $kendo-calendar-sm-cell-font-size
+    ),
+    md: (
+        font-size: $kendo-calendar-md-font-size,
+        line-height: $kendo-calendar-md-line-height,
+        cell-size: $kendo-calendar-md-cell-size,
+        cell-padding-x: $kendo-calendar-md-cell-padding-y,
+        cell-padding-y: $kendo-calendar-md-cell-padding-x,
+        cell-font-size: $kendo-calendar-md-cell-font-size
+    ),
+    lg: (
+        font-size: $kendo-calendar-lg-font-size,
+        line-height: $kendo-calendar-lg-line-height,
+        cell-size: $kendo-calendar-lg-cell-size,
+        cell-padding-x: $kendo-calendar-lg-cell-padding-y,
+        cell-padding-y: $kendo-calendar-lg-cell-padding-x,
+        cell-font-size: $kendo-calendar-lg-cell-font-size
+    )
+) !default;

package/scss/coloreditor/_layout.scss

@@ -25,6 +25,13 @@
             }
         }
 
+        .k-coloreditor .k-colorgradient:focus,
+        .k-coloreditor .k-colorgradient.k-focus {
+            outline: var( --kendo-coloreditor-colorgradient-focus-outline, #{$kendo-coloreditor-colorgradient-focus-outline} ) dotted;
+            outline-offset: var( --kendo-coloreditor-colorgradient-focus-outline-offset, #{$kendo-coloreditor-colorgradient-focus-outline-offset} );
+            border-radius: 0;
+        }
+
         // Header
         .k-coloreditor-header {
             padding-inline: var( --kendo-coloreditor-header-padding-x, #{$kendo-coloreditor-header-padding-x} );

package/scss/coloreditor/_theme.scss

@@ -24,4 +24,9 @@
         );
     }
 
+    .k-coloreditor .k-colorgradient:focus,
+    .k-coloreditor .k-colorgradient.k-focus {
+        box-shadow: none;
+        outline-color: var( --kendo-coloreditor-colorgradient-focus-outline-color, #{$kendo-coloreditor-colorgradient-focus-outline-color} );
+    }
 }

package/scss/coloreditor/_variables.scss

@@ -81,3 +81,13 @@ $kendo-coloreditor-footer-padding-y: map-get( $kendo-spacing, 2 ) !default;
 /// Vertical padding of the color editor footer.
 /// @group coloreditor
 $kendo-coloreditor-footer-padding-x: map-get( $kendo-spacing, 2 ) !default;
+
+/// The color of the focused colorgradient.
+/// @group coloreditor
+$kendo-coloreditor-colorgradient-focus-outline-color: rgba(0, 0, 0, 0.3) !default;
+/// The outline of the focused colorgradient.
+/// @group coloreditor
+$kendo-coloreditor-colorgradient-focus-outline: 2px !default;
+/// The outline offset of the focused colorgradient.
+/// @group coloreditor
+$kendo-coloreditor-colorgradient-focus-outline-offset: 2px !default;

package/scss/core/module-system/_components.scss

@@ -63,6 +63,7 @@ $components: (
     "dateinput",
     "datepicker",
     "timepicker",
+    "timedurationpicker",
     "datetimepicker",
     "daterangepicker",
     "dropdowngrid",

package/scss/index.scss

@@ -70,6 +70,7 @@
 @use "dateinput";
 @use "datepicker";
 @use "timepicker";
+@use "timedurationpicker";
 @use "datetimepicker";
 @use "daterangepicker";
 @use "dropdowngrid";
@@ -229,6 +230,7 @@
     @include dateinput.styles();
     @include datepicker.styles();
     @include timepicker.styles();
+    @include timedurationpicker.styles();
     @include datetimepicker.styles();
     @include daterangepicker.styles();
     @include dropdowngrid.styles();

package/scss/signature/_layout.scss

@@ -19,6 +19,12 @@
                 border-bottom-width: var( --kendo-signature-maximized-line-width, #{$kendo-signature-maximized-line-width} );
             }
         }
+
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            opacity: var( --kendo-signature-disabled-opacity, #{$kendo-signature-disabled-opacity} );
+        }
     }
 
     .k-signature-actions {

package/scss/signature/_theme.scss

@@ -8,6 +8,14 @@
         .k-signature-line {
             border-bottom-color: var( --kendo-signature-line-color, #{$kendo-signature-line-color} );
         }
+
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            .k-signature-line {
+                border-bottom-color: var( --kendo-signature-line-disabled-color, #{$kendo-signature-line-disabled-color} );
+            }
+        }
     }
 
 }

package/scss/signature/_variables.scss

@@ -25,6 +25,10 @@ $kendo-signature-padding-y-sm: map-get( $kendo-spacing, thin ) !default;
 $kendo-signature-padding-y-md: $kendo-signature-padding-x-md !default;
 $kendo-signature-padding-y-lg: map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) !default;
 
+/// The opacity of the disabled signature component.
+/// @group signature
+$kendo-signature-disabled-opacity: .3 !default;
+
 /// The bottom-border width of the row line of the signature component.
 /// @group signature
 $kendo-signature-line-width: 1px !default;
@@ -33,7 +37,10 @@ $kendo-signature-line-width: 1px !default;
 $kendo-signature-line-style: dashed !default;
 /// The color of the row line of the signature component.
 /// @group signature
-$kendo-signature-line-color: get-theme-color-var( primary-30 ) !default;
+$kendo-signature-line-color: rgba( get-theme-color( info, 100 ), .4 ) !default;
+/// The color of the row line of the disabled signature component.
+/// @group signature
+$kendo-signature-line-disabled-color: get-theme-color-var( neutral-60 ) !default;
 /// The width of the row line of the signature component.
 /// @group signature
 $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding-x} ) !default;

package/scss/timedurationpicker/_layout.scss

@@ -0,0 +1,6 @@
+@mixin kendo-timedurationpicker--layout() {
+
+    // Time picker
+    .k-timedurationpicker {}
+
+}

package/scss/timedurationpicker/_theme.scss

@@ -0,0 +1,6 @@
+@mixin kendo-timedurationpicker--theme() {
+
+    // Time picker
+    .k-timedurationpicker {}
+
+}

package/scss/timedurationpicker/_variables.scss

@@ -0,0 +1 @@
+// Time Duration picker

package/scss/timedurationpicker/index.scss

@@ -0,0 +1,29 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "timedurationpicker",
+    dependencies: (
+        "button",
+        "icon",
+        "input",
+        "popup",
+        "list",
+        "timeselector"
+    )
+);
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "timedurationpicker" ) {
+        @include kendo-timedurationpicker--layout();
+        @include kendo-timedurationpicker--theme();
+    }
+}

package/scss/timepicker/index.scss

@@ -3,6 +3,7 @@ $_kendo-module-meta: (
     name: "timepicker",
     dependencies: (
         "button",
+        "icon",
         "input",
         "popup",
         "list",

package/scss/timeselector/_layout.scss

@@ -30,7 +30,7 @@
     // Time selector header
     .k-time-header,
     .k-time-selector-header {
-        padding: var( --kendo-time-selector-header-padding-y, $kendo-time-selector-header-padding-y ) var( --kendo-time-selector-header-padding-x, $kendo-time-selector-header-padding-x ) 0;
+        padding: var( --kendo-time-selector-header-padding-y, $kendo-time-selector-header-padding-y ) var( --kendo-time-selector-header-padding-x, $kendo-time-selector-header-padding-x );
         box-sizing: border-box;
         display: flex;
         align-items: center;