@progress/kendo-theme-fluent 8.0.0-dev.0 → 8.0.0-dev.2

package/scss/fab/_variables.scss

@@ -8,7 +8,7 @@
 $kendo-fab-border-width: 1px !default;
 /// The border radius of the FAB.
 /// @group floating-action-button
-$kendo-fab-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-fab-border-radius: k-border-radius(md) !default;
 /// The font family of the FAB.
 /// @group floating-action-button
 $kendo-fab-font-family: var( --kendo-font-family, inherit ) !default;
@@ -21,29 +21,29 @@ $kendo-fab-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The horizontal padding of the FAB.
 /// @group floating-action-button
-$kendo-fab-padding-x: map.get( $kendo-spacing, 4 ) !default;
+$kendo-fab-padding-x: k-spacing(4) !default;
 /// The horizontal padding of the small FAB.
 /// @group floating-action-button
-$kendo-fab-sm-padding-x: math.div( $kendo-fab-padding-x, 2 ) !default;
+$kendo-fab-sm-padding-x: calc( #{$kendo-fab-padding-x} / 2 ) !default;
 /// The horizontal padding of the medium FAB.
 /// @group floating-action-button
 $kendo-fab-md-padding-x: $kendo-fab-padding-x !default;
 /// The horizontal padding of the large FAB.
 /// @group floating-action-button
-$kendo-fab-lg-padding-x: ( $kendo-fab-padding-x * 1.5 ) !default;
+$kendo-fab-lg-padding-x: calc( #{$kendo-fab-padding-x} * 1.5 ) !default;
 
 /// The vertical padding of the FAB.
 /// @group floating-action-button
 $kendo-fab-padding-y: $kendo-fab-padding-x !default;
 /// The vertical padding of the small FAB.
 /// @group floating-action-button
-$kendo-fab-sm-padding-y: math.div( $kendo-fab-padding-y, 2 ) !default;
+$kendo-fab-sm-padding-y: calc( #{$kendo-fab-padding-y} / 2 ) !default;
 /// The vertical padding of the medium FAB.
 /// @group floating-action-button
 $kendo-fab-md-padding-y: $kendo-fab-padding-y !default;
 /// The vertical padding of the large FAB.
 /// @group floating-action-button
-$kendo-fab-lg-padding-y: ( $kendo-fab-padding-y * 1.5 ) !default;
+$kendo-fab-lg-padding-y: calc( #{$kendo-fab-padding-y} * 1.5 ) !default;
 
 /// The offset of the focused FAB.
 /// @group floating-action-button
@@ -57,27 +57,27 @@ $kendo-fab-focus-outline-style: $kendo-button-focus-outline-style !default;
 
 /// The horizontal padding of the FAB icon.
 /// @group floating-action-button
-$kendo-fab-icon-padding-x: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-fab-icon-padding-x: k-spacing(0.5) !default;
 /// The vertical padding of the FAB icon.
 /// @group floating-action-button
 $kendo-fab-icon-padding-y: $kendo-fab-icon-padding-x !default;
 /// The spacing of the FAB icon.
 /// @group floating-action-button
-$kendo-fab-icon-spacing: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-fab-icon-spacing: k-spacing(0.5) !default;
 
 /// The horizontal padding of the FAB items.
 /// @group floating-action-button
-$kendo-fab-items-padding-x: 0px !default;
+$kendo-fab-items-padding-x: k-spacing(0) !default;
 /// The vertical padding of the FAB items.
 /// @group floating-action-button
-$kendo-fab-items-padding-y: map.get( $kendo-spacing, 4 ) !default;
+$kendo-fab-items-padding-y: k-spacing(4) !default;
 
 /// The horizontal padding of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-padding-x: map.get( $kendo-spacing, 1 ) !default;
+$kendo-fab-item-text-padding-x: k-spacing(1) !default;
 /// The vertical padding of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-fab-item-text-padding-y: k-spacing(1) !default;
 /// The width of the FAB item text border.
 /// @group floating-action-button
 $kendo-fab-item-text-border-width: 1px !default;
@@ -86,7 +86,7 @@ $kendo-fab-item-text-border-width: 1px !default;
 $kendo-fab-item-text-border-style: solid !default;
 /// The border radius of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-fab-item-text-border-radius: k-border-radius(md) !default;
 /// The font size of the FAB item text.
 /// @group floating-action-button
 $kendo-fab-item-text-font-size: var( --kendo-font-size-sm, inherit ) !default;
@@ -95,7 +95,7 @@ $kendo-fab-item-text-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-fab-item-text-line-height: var( --kendo-line-height-sm, inherit ) !default;
 /// The bottom margin of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-offset-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-fab-item-text-offset-x: k-spacing(2) !default;
 
 /// The offset of the focused FAB item.
 /// @group floating-action-button
@@ -109,7 +109,7 @@ $kendo-fab-item-focus-outline-style: $kendo-button-focus-outline-style !default;
 
 /// The horizontal padding of the FAB item icon.
 /// @group floating-action-button
-$kendo-fab-item-icon-padding-x: map.get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x !default;
+$kendo-fab-item-icon-padding-x: calc( #{k-spacing(2)} + $kendo-fab-icon-padding-x ) !default;
 /// The vertical padding of the FAB item icon.
 /// @group floating-action-button
 $kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-x !default;
@@ -148,7 +148,7 @@ $kendo-fab-sizes: (
 
 /// The bottom margin of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-offset-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-fab-item-offset-y: k-spacing(2) !default;
 /// The base text color of the FAB item.
 /// @group floating-action-button
 $kendo-fab-item-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;

package/scss/filemanager/_variables.scss

@@ -5,7 +5,7 @@
 
 /// The space between the FileManager items.
 /// @group filemanager
-$kendo-file-manager-spacer: map.get( $kendo-spacing, 4 ) !default;
+$kendo-file-manager-spacer: k-spacing(4) !default;
 /// The border width of the FileManager.
 /// @group filemanager
 $kendo-file-manager-border-width: 1px !default;
@@ -65,10 +65,10 @@ $kendo-file-manager-navigation-border: inherit !default;
 
 /// The horizontal padding of the FileManager Breadcrumb.
 /// @group filemanager
-$kendo-file-manager-breadcrumb-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-file-manager-breadcrumb-padding-x: k-spacing(2) !default;
 /// The vertical padding of the FileManager Breadcrumb.
 /// @group filemanager
-$kendo-file-manager-breadcrumb-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-file-manager-breadcrumb-padding-y: k-spacing(2) !default;
 /// The border width of the FileManager Breadcrumb.
 /// @group filemanager
 $kendo-file-manager-breadcrumb-border-width: $kendo-file-manager-border-width !default;
@@ -94,10 +94,10 @@ $kendo-file-manager-listview-border: inherit !default;
 
 /// The horizontal padding of the FileManager ListView item.
 /// @group filemanager
-$kendo-file-manager-listview-item-padding-x: map.get( $kendo-spacing, 4 ) !default;
+$kendo-file-manager-listview-item-padding-x: k-spacing(4) !default;
 /// The vertical padding of the FileManager ListView item.
 /// @group filemanager
-$kendo-file-manager-listview-item-padding-y: map.get( $kendo-spacing, 4 ) !default;
+$kendo-file-manager-listview-item-padding-y: k-spacing(4) !default;
 /// The width of the FileManager ListView item.
 /// @group filemanager
 $kendo-file-manager-listview-item-width: 120px !default;
@@ -160,7 +160,7 @@ $kendo-file-manager-preview-border-width: $kendo-file-manager-border-width !defa
 $kendo-file-manager-preview-spacing: $kendo-file-manager-spacer !default;
 /// The gap between the columns in the FileManager preview.
 /// @group filemanager
-$kendo-file-manager-preview-column-gap: map.get( $kendo-spacing, 1 ) !default;
+$kendo-file-manager-preview-column-gap: k-spacing(1) !default;
 /// The background color of the FileManager preview.
 /// @group filemanager
 $kendo-file-manager-preview-bg: transparent !default;

package/scss/filter/_variables.scss

@@ -1,4 +1,5 @@
 @use "../core/" as *;
+@use "../core/spacing" as *;
 
 /// The horizontal padding of the Filter.
 /// @group filter
@@ -9,7 +10,7 @@ $kendo-filter-padding-y: $kendo-padding-md-y !default;
 
 /// The bottom margin of the Filter.
 /// @group filter
-$kendo-filter-bottom-margin: 30px !default;
+$kendo-filter-bottom-margin: k-spacing(7.5) !default;
 /// The width of the line that connects the Filter items.
 /// @group filter
 $kendo-filter-line-size: 1px !default;

package/scss/forms/_layout.scss

@@ -4,6 +4,7 @@
 @use "./_variables.scss" as *;
 @use "../input/_variables.scss" as *;
 @use "../window/_variables.scss" as *;
+@use "../core/spacing" as *;
 
 @mixin kendo-forms--layout() {
 
@@ -281,12 +282,12 @@
     // Action buttons
     .k-popup-edit-form > .k-actions,
     .k-edit-form-container .k-actions {
-        margin: map.get( $kendo-spacing, 4 ) (-$kendo-window-inner-padding-x) (-$kendo-window-inner-padding-y);
+        margin: k-spacing(4) (-$kendo-window-inner-padding-x) (-$kendo-window-inner-padding-y);
     }
 
 
     .k-edit-label {
-        margin-block-end: map.get( $kendo-spacing, 4 );
+        margin-block-end: k-spacing(4);
         padding-block: calc( #{$kendo-input-md-padding-y} + #{$kendo-input-border-width} );
         width: 30%;
         line-height: var( --kendo-form-line-height, #{$kendo-form-line-height} );
@@ -295,7 +296,7 @@
         clear: both;
     }
     .k-edit-field {
-        margin-block-end: map.get( $kendo-spacing, 4 );
+        margin-block-end: k-spacing(4);
         width: 65%;
         float: right;
         clear: right;
@@ -320,11 +321,11 @@
 
         .k-radio-label,
         .k-checkbox-label {
-            margin-inline-end: map.get( $kendo-spacing, 4 );
+            margin-inline-end: k-spacing(4);
         }
 
         > .k-reset > li + li {
-            margin-block-start: map.get( $kendo-spacing, 2 );
+            margin-block-start: k-spacing(2);
         }
 
         .k-reset .k-widget {

package/scss/forms/_variables.scss

@@ -1,9 +1,10 @@
 @use "sass:map";
 @use "../core/" as *;
+@use "../core/spacing" as *;
 
 /// The padding of the inline Form.
 /// @group form
-$kendo-form-spacer: ( $kendo-padding-md-x * 2 ) !default;
+$kendo-form-spacer: calc( #{$kendo-padding-md-x} * 2 ) !default;
 
 /// The font size of the Form.
 /// @group form
@@ -28,19 +29,19 @@ $kendo-form-fieldset-margin: 2em 0 0 !default;
 
 /// The padding of the Form fieldset.
 /// @group form
-$kendo-form-fieldset-padding: 0px !default;
+$kendo-form-fieldset-padding: k-spacing(0) !default;
 
 /// The margin of the Form legend.
 /// @group form
-$kendo-form-legend-margin: 0 0 map.get( $kendo-spacing, 3 ) !default;
+$kendo-form-legend-margin: 0 0 k-spacing(3) !default;
 
 /// The padding of the Form legend.
 /// @group form
-$kendo-form-legend-padding: 0px !default;
+$kendo-form-legend-padding: k-spacing(0) !default;
 
 /// The border width of the Form legend.
 /// @group form
-$kendo-form-legend-border-width: 0 0 map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-form-legend-border-width: 0 0 k-spacing(0.5) !default;
 
 /// The border style of the Form legend.
 /// @group form
@@ -65,7 +66,7 @@ $kendo-form-legend-text-transform: uppercase !default;
 
 /// The bottom margin of the Form label.
 /// @group form
-$kendo-form-label-margin-bottom: map.get( $kendo-spacing, 2 ) !default;
+$kendo-form-label-margin-bottom: k-spacing(2) !default;
 
 /// The font weight of the form label
 /// @group form
@@ -73,7 +74,7 @@ $kendo-form-label-font-weight: var( --kendo-font-weight-bold, inherit ) !default
 
 /// The horizontal margin of the Form buttons.
 /// @group form
-$kendo-form-button-margin-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-form-button-margin-x: k-spacing(2) !default;
 
 /// The font size of the Form hint.
 /// @group form
@@ -85,7 +86,7 @@ $kendo-form-hint-font-style: normal !default;
 
 /// The top margin of the Form hint.
 /// @group form
-$kendo-form-hint-margin-top: map.get( $kendo-spacing, 1 ) !default;
+$kendo-form-hint-margin-top: k-spacing(1) !default;
 
 /// The text color of the Form hint.
 /// @group form
@@ -93,7 +94,7 @@ $kendo-form-hint-text: if($kendo-enable-color-system, k-color( subtle ), k-get-t
 
 /// The row spacing of the small Form.
 /// @group form
-$kendo-form-sm-rows-spacing: map.get( $kendo-spacing, 3 ) !default;
+$kendo-form-sm-rows-spacing: k-spacing(3) !default;
 /// The row spacing of the medium Form.
 /// @group form
 $kendo-form-md-rows-spacing: $kendo-form-sm-rows-spacing !default;
@@ -103,7 +104,7 @@ $kendo-form-lg-rows-spacing: $kendo-form-sm-rows-spacing !default;
 
 /// The margin of the Form separator.
 /// @group form
-$kendo-form-separator-margin: map.get( $kendo-spacing, 3 ) 0 0 !default;
+$kendo-form-separator-margin: k-spacing(3) 0 0 !default;
 
 /// The border color of the Form separator.
 /// @group form
@@ -111,11 +112,11 @@ $kendo-form-separator-border-color: $kendo-form-legend-border-color !default;
 
 /// The top padding of the label in the horizontal Form.
 /// @group form
-$kendo-horizontal-form-label-padding-top: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-horizontal-form-label-padding-top: k-spacing(1.5) !default;
 
 /// The horizontal margin of the label in the horizontal Form.
 /// @group form
-$kendo-horizontal-form-label-margin-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-horizontal-form-label-margin-x: k-spacing(2) !default;
 
 /// The width of the label in the horizontal Form.
 /// @group form
@@ -140,7 +141,7 @@ $kendo-forms-invalid-color: var( --kendo-invalid-text, initial ) !default;
 
 /// The horizontal margin of the optional label in the Form.
 /// @group form
-$kendo-label-optional-margin-x: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-label-optional-margin-x: k-spacing(1.5) !default;
 /// The font size of the optional label in the Form.
 /// @group form
 $kendo-label-optional-font-size: var( --kendo-font-size-sm, inherit ) !default;
@@ -151,7 +152,7 @@ $kendo-label-optional-font-style: normal !default;
 
 /// The margin of the Form fieldset.
 /// @group form
-$kendo-fieldset-margin: map.get( $kendo-spacing, 7.5 ) !default;
+$kendo-fieldset-margin: k-spacing(7.5) !default;
 /// The font size of the Form fieldset.
 /// @group form
 $kendo-fieldset-font-size: var( --kendo-font-size-xl, inherit ) !default;

package/scss/gantt/_layout.scss

@@ -3,6 +3,7 @@
 @use "../grid/_variables.scss" as *;
 @use "../toolbar/_variables.scss" as *;
 @use "./_variables.scss" as *;
+@use "../core/spacing" as *;
 
 @mixin kendo-gantt--layout() {
 
@@ -32,7 +33,7 @@
             vertical-align: top;
         }
         .k-grid-header tr {
-            height: calc( #{$kendo-line-height-em} + #{$kendo-grid-header-padding-y * 2} + 1px );
+            height: calc( #{$kendo-line-height-em} + calc( #{$kendo-grid-header-padding-y} * 2 ) + 1px );
         }
         .k-grid-header .k-header {
             position: static;
@@ -42,11 +43,11 @@
             position: relative;
         }
         .k-grid-content tr {
-            height: calc( #{$kendo-line-height-em} + #{$kendo-grid-cell-padding-y * 2} + #{$kendo-grid-cell-border-width-y} );
+            height: calc( #{$kendo-line-height-em} + calc( #{$kendo-grid-cell-padding-y} * 2) + #{$kendo-grid-cell-border-width-y} );
         }
 
         &.k-gantt-planned .k-grid-content tr {
-            height: calc( #{$kendo-line-height-em} * 1.7 + #{$kendo-grid-cell-padding-y * 2} + #{$kendo-grid-cell-border-width-y} );
+            height: calc( #{$kendo-line-height-em} * 1.7 + calc( #{$kendo-grid-cell-padding-y} * 2 ) + #{$kendo-grid-cell-border-width-y} );
         }
 
         // Layout
@@ -270,7 +271,7 @@
             padding: 0 !important; // stylelint-disable-line declaration-no-important
         }
         .k-grid-header tr {
-            height: calc( #{$kendo-line-height-em} * 2 + #{$kendo-grid-header-padding-y * 4} + 2px );
+            height: calc( #{$kendo-line-height-em} * 2 + calc( #{$kendo-grid-header-padding-y} * 4 ) + 2px );
             vertical-align: bottom;
         }
         .k-grid-content {
@@ -281,7 +282,7 @@
             vertical-align: middle;
         }
         .k-gantt-treelist-nested-columns .k-grid-header tr {
-            height: calc( #{$kendo-line-height-em} + #{$kendo-grid-header-padding-y * 2} + 1px );
+            height: calc( #{$kendo-line-height-em} + calc( #{$kendo-grid-header-padding-y} * 2 ) + 1px );
         }
 
         &.k-gantt-treelist-scrollable {
@@ -422,8 +423,8 @@
         flex: 1 1 auto;
     }
     .k-task-dot {
-        width: calc( #{$kendo-gantt-dot-size} + #{$kendo-gantt-dot-spacing * 2} );
-        height: calc( #{$kendo-gantt-dot-size} + #{$kendo-gantt-dot-spacing * 2} );
+        width: calc( #{$kendo-gantt-dot-size} + calc( #{$kendo-gantt-dot-spacing} * 2 ) );
+        height: calc( #{$kendo-gantt-dot-size} + calc( #{$kendo-gantt-dot-spacing} * 2 ) );
         line-height: 1;
         cursor: pointer;
         display: none;
@@ -532,7 +533,7 @@
     // Single task
     .k-single-wrap {}
     .k-task-single {
-        border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} );
+        border-radius: k-border-radius(md);
         border-width: var( --kendo-gantt-task-border-width, #{$kendo-gantt-task-border-width} );
         border-style: solid;
         box-sizing: border-box;
@@ -565,7 +566,7 @@
         }
     }
     .k-task-complete {
-        border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} );
+        border-radius: k-border-radius(md);
         width: 20%;
         position: absolute;
         z-index: 1;