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

package/scss/pivotgrid/_variables.scss

@@ -7,14 +7,14 @@
 
 /// Spacer of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-spacer: map.get( $kendo-spacing, 3 ) !default;
+$kendo-pivotgrid-spacer: k-spacing(3) !default;
 
 /// Horizontal padding of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-padding-x: 0px !default;
+$kendo-pivotgrid-padding-x: k-spacing(0) !default;
 /// Vertical of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-padding-y: 0px !default;
+$kendo-pivotgrid-padding-y: k-spacing(0) !default;
 /// Font family of the PivotGrid.
 /// @group pivotgrid
 $kendo-pivotgrid-font-family: var( --kendo-font-family, inherit ) !default;
@@ -29,7 +29,7 @@ $kendo-pivotgrid-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-pivotgrid-border-width: 1px !default;
 /// Icon spacing of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-icon-spacing: map.get( $kendo-spacing, 1 ) !default;
+$kendo-pivotgrid-icon-spacing: k-spacing(1) !default;
 
 /// Background color of the PivotGrid.
 /// @group pivotgrid
@@ -107,10 +107,10 @@ $kendo-pivotgrid-focus-shadow: $kendo-list-item-focus-shadow !default;
 
 /// Horizontal padding of the PivotGrid configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-padding-x: 0px !default;
+$kendo-pivotgrid-configurator-padding-x: k-spacing(0) !default;
 /// Vertical padding of the PivotGrid configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-padding-y: 0px !default;
+$kendo-pivotgrid-configurator-padding-y: k-spacing(0) !default;
 /// Border width of the PivotGrid configurator.
 /// @group pivotgrid
 $kendo-pivotgrid-configurator-border-width: 1px !default;
@@ -133,17 +133,17 @@ $kendo-pivotgrid-configurator-header-font-weight: var( --kendo-font-weight-bold,
 $kendo-pivotgrid-configurator-content-padding-x: $kendo-pivotgrid-spacer !default;
 /// Vertical padding of the PivotGrid configurator content.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-content-padding-y: 0px !default;
+$kendo-pivotgrid-configurator-content-padding-y: k-spacing(0) !default;
 
 /// Horizontal margin of the PivotGrid configurator fields.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-fields-margin-x: 0px !default;
+$kendo-pivotgrid-configurator-fields-margin-x: k-spacing(0) !default;
 /// Vertical margin of the PivotGrid configurator fields.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-fields-margin-y: math.div( $kendo-pivotgrid-spacer, 2 ) !default;
+$kendo-pivotgrid-configurator-fields-margin-y: calc( #{$kendo-pivotgrid-spacer} / 2 ) !default;
 /// Spacing of the PivotGrid configurator fields.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-fields-gap: map.get( $kendo-spacing, 2) !default;
+$kendo-pivotgrid-configurator-fields-gap: k-spacing(2) !default;
 
 /// Default width of the PivotGrid vertical configurator.
 /// @group pivotgrid
@@ -174,19 +174,19 @@ $kendo-pivotgrid-configurator-header-border: inherit !default;
 
 /// Horizontal padding of the PivotGrid configurator button.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-button-padding-x: map.get( $kendo-spacing, 1 ) !default;
+$kendo-pivotgrid-configurator-button-padding-x: k-spacing(1) !default;
 /// Vertical padding of the PivotGrid configurator button.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-button-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-pivotgrid-configurator-button-padding-y: k-spacing(1) !default;
 /// Border width of the PivotGrid configurator button.
 /// @group pivotgrid
 $kendo-pivotgrid-configurator-button-border-width: 1px !default;
 /// Size of the PivotGrid configurator button.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-button-size: calc( #{$kendo-pivotgrid-line-height} * 1em + #{$kendo-pivotgrid-configurator-button-padding-y * 2} + #{$kendo-pivotgrid-configurator-button-border-width * 2} ) !default;
+$kendo-pivotgrid-configurator-button-size: calc( calc( #{$kendo-pivotgrid-line-height} * 1em ) + calc( #{$kendo-pivotgrid-configurator-button-padding-y} * 2 ) + calc( #{$kendo-pivotgrid-configurator-button-border-width} * 2 ) ) !default;
 /// Icon spacing of the PivotGrid configurator button.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-button-icon-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-pivotgrid-configurator-button-icon-spacing: k-spacing(2) !default;
 
 /// Horizontal padding of the PivotGrid calculated field.
 /// @group pivotgrid
@@ -199,7 +199,7 @@ $kendo-pivotgrid-calculated-field-padding-y: $kendo-pivotgrid-spacer !default;
 $kendo-pivotgrid-calculated-field-border-width: 1px !default;
 /// Border radius of the PivotGrid calculated field.
 /// @group pivotgrid
-$kendo-pivotgrid-calculated-field-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-pivotgrid-calculated-field-border-radius: k-border-radius(md) !default;
 /// Spacing of the PivotGrid calculated field.
 /// @group pivotgrid
 $kendo-pivotgrid-calculated-field-gap: $kendo-pivotgrid-spacer !default;
@@ -225,10 +225,10 @@ $kendo-pivotgrid-calculated-field-header-border: inherit !default;
 
 /// Horizontal padding of the PivotGrid treeview.
 /// @group pivotgrid
-$kendo-pivotgrid-treeview-padding-x: math.div( $kendo-pivotgrid-spacer, 2 ) !default;
+$kendo-pivotgrid-treeview-padding-x: calc( #{$kendo-pivotgrid-spacer} / 2 ) !default;
 /// Vertical padding of the PivotGrid treeview.
 /// @group pivotgrid
-$kendo-pivotgrid-treeview-padding-y: 0px !default;
+$kendo-pivotgrid-treeview-padding-y: k-spacing(0) !default;
 
 // Legacy variables
 $kendo-pivotgrid-alt-bg: $kendo-grid-header-bg !default;

package/scss/popover/_variables.scss

@@ -75,11 +75,11 @@ $kendo-popover-actions-padding-x: $kendo-popover-body-padding-x !default;
 $kendo-popover-actions-padding-y: $kendo-popover-body-padding-y !default;
 /// The spacing between the Popover actions.
 /// @group popover
-$kendo-popover-actions-gap: map.get( $kendo-spacing, 3 ) !default;
+$kendo-popover-actions-gap: k-spacing(3) !default;
 
 /// The width of the Popover callout.
 /// @group popover
-$kendo-popover-callout-width: map.get( $kendo-spacing, 5 ) !default;
+$kendo-popover-callout-width: k-spacing(5) !default;
 /// The height of the Popover callout.
 /// @group popover
 $kendo-popover-callout-height: $kendo-popover-callout-width !default;

package/scss/popup/_variables.scss

@@ -3,16 +3,16 @@
 
 /// Horizontal padding of the popup.
 /// @group popup
-$kendo-popup-padding-x: 0 !default;
+$kendo-popup-padding-x: k-spacing(0) !default;
 /// Vertical padding of the popup.
 /// @group popup
-$kendo-popup-padding-y: 0 !default;
+$kendo-popup-padding-y: k-spacing(0) !default;
 /// Width of the border around the popup.
 /// @group popup
 $kendo-popup-border-width: 0 !default;
 /// Border radius of the popup.
 /// @group popup
-$kendo-popup-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-popup-border-radius: k-border-radius(md) !default;
 
 /// Font size of the popup.
 /// @group popup
@@ -23,10 +23,10 @@ $kendo-popup-line-height: var( --kendo-line-height, normal) !default;
 
 /// Horizontal padding of the content inside the popup.
 /// @group popup
-$kendo-popup-content-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-popup-content-padding-x: k-spacing(2) !default;
 /// Vertical padding of the content inside the popup.
 /// @group popup
-$kendo-popup-content-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-popup-content-padding-y: k-spacing(2) !default;
 
 /// Background color of the popup.
 /// @group popup

package/scss/progressbar/_variables.scss

@@ -27,10 +27,10 @@ $kendo-progressbar-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-progressbar-line-height: var( --kendo-line-height, inherit ) !default;
 /// The horizontal padding of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-padding-x: 0 !default;
+$kendo-progressbar-padding-x: k-spacing(0) !default;
 /// The vertical padding of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-padding-y: 0 !default;
+$kendo-progressbar-padding-y: k-spacing(0) !default;
 
 /// The background color of the ProgressBar.
 /// @group progressbar
@@ -60,7 +60,7 @@ $kendo-progressbar-value-gradient: null !default;
 
 /// The progress status offset of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-offset-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-progressbar-offset-y: k-spacing(2) !default;
 /// The progress status offset of the vertical ProgressBar.
 /// @group progressbar
 $kendo-progressbar-vertical-status-offset: calc( (#{$kendo-progressbar-font-size} * #{$kendo-progressbar-line-height} + #{$kendo-progressbar-offset-y}) * -1) !default;
@@ -111,4 +111,4 @@ $kendo-progressbar-chunk-border: var( --kendo-body-bg, initial ) !default;
 $kendo-circular-progressbar-arc-stroke: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// The scale stroke background color of the circular ProgressBar.
 /// @group progressbar
-$kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default;
+$kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default;

package/scss/prompt/_variables.scss

@@ -23,13 +23,13 @@ $kendo-prompt-header-border: var( --kendo-component-border, initial ) !default;
 
 /// The vertical padding of the Prompt content.
 /// @group prompt
-$kendo-prompt-content-padding-y: map.get( $kendo-spacing, 4 ) !default;
+$kendo-prompt-content-padding-y: k-spacing(4) !default;
 /// The horizontal padding of the Prompt content.
 /// @group prompt
-$kendo-prompt-content-padding-x: map.get( $kendo-spacing, 4 ) !default;
+$kendo-prompt-content-padding-x: k-spacing(4) !default;
 /// The spacing between the items of the Prompt content.
 /// @group prompt
-$kendo-prompt-content-spacing: map.get( $kendo-spacing, 4 ) !default;
+$kendo-prompt-content-spacing: k-spacing(4) !default;
 /// The text color of the Prompt content.
 /// @group prompt
 $kendo-prompt-content-text: k-get-theme-color-var( neutral-190 ) !default;
@@ -42,17 +42,17 @@ $kendo-prompt-content-border: var( --kendo-component-border, initial ) !default;
 
 /// The spacing between the items of the Prompt content expander.
 /// @group prompt
-$kendo-prompt-expander-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-prompt-expander-spacing: k-spacing(2) !default;
 
 /// The vertical padding of the Prompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-prompt-suggestion-padding-y: k-spacing(2) !default;
 /// The horizontal padding of the Prompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-prompt-suggestion-padding-x: k-spacing(2) !default;
 /// The border radius of the Prompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-prompt-suggestion-border-radius: k-border-radius(md) !default;
 /// The text color of the Prompt suggestion container.
 /// @group prompt
 $kendo-prompt-suggestion-text: var( --kendo-component-text, initial ) !default;

package/scss/radio/_variables.scss

@@ -17,21 +17,21 @@ $kendo-radio-border-width: 1px !default;
 /// @group radio
 $kendo-radio-sizes: (
     sm: (
-        size: map.get( $kendo-spacing, 4 ),
-        glyph-size: map.get( $kendo-spacing, 3.5 ),
-        indicator-size: map.get( $kendo-spacing, 2 ),
+        size: k-spacing(4),
+        glyph-size: k-spacing(3.5),
+        indicator-size: k-spacing(2),
         ripple-size: 300%
     ),
     md: (
-        size: map.get( $kendo-spacing, 5 ),
-        glyph-size: map.get( $kendo-spacing, 4.5 ),
-        indicator-size: map.get( $kendo-spacing, 2.5 ),
+        size: k-spacing(5),
+        glyph-size: k-spacing(4.5),
+        indicator-size: k-spacing(2.5),
         ripple-size: 300%
     ),
     lg: (
-        size: map.get( $kendo-spacing, 6 ),
-        glyph-size: map.get( $kendo-spacing, 5.5 ),
-        indicator-size: map.get( $kendo-spacing, 3 ),
+        size: k-spacing(6),
+        glyph-size: k-spacing(5.5),
+        indicator-size: k-spacing(3),
         ripple-size: 300%
     )
 ) !default;
@@ -149,23 +149,23 @@ $kendo-radio-disabled-checked-image: null !default;
 
 /// The horizontal margin of the RadioButton inside of a label.
 /// @group radio
-$kendo-radio-label-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-radio-label-spacing: k-spacing(2) !default;
 
 
 // Radio list
 
 /// The horizontal list item margin of the RadioButton.
 /// @group radio
-$kendo-radio-list-spacing: map.get( $kendo-spacing, 4 ) !default;
+$kendo-radio-list-spacing: k-spacing(4) !default;
 /// The horizontal list item padding of the RadioButton.
 /// @group radio
-$kendo-radio-list-item-padding-x: 0px !default;
+$kendo-radio-list-item-padding-x: k-spacing(0) !default;
 /// The vertical list item padding of the RadioButton.
 /// @group radio
 $kendo-radio-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 /// The gap between the list items of the RadioButton.
 /// @group radio
-$kendo-radio-list-item-gap: map.get( $kendo-spacing, 2 ) !default;
+$kendo-radio-list-item-gap: k-spacing(2) !default;
 
 // Radio ripple
 

package/scss/rating/_variables.scss

@@ -13,14 +13,14 @@ $kendo-rating-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The content spacing of the Rating.
 /// @group rating
-$kendo-rating-spacing: map.get( $kendo-spacing, 1 ) !default;
+$kendo-rating-spacing: k-spacing(1) !default;
 
 /// The horizontal padding of the Rating item.
 /// @group rating
-$kendo-rating-item-padding-x: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-rating-item-padding-x: k-spacing(0.5) !default;
 /// The vertical padding of the Rating item.
 /// @group rating
-$kendo-rating-item-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-rating-item-padding-y: k-spacing(2) !default;
 /// The text color of the Rating item.
 /// @group rating
 $kendo-rating-item-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;

package/scss/scheduler/_layout.scss

@@ -685,7 +685,7 @@
             display: flex;
             flex: 1 1 100%;
             align-items: center;
-            gap: map.get( $kendo-spacing, 0.5 );
+            gap: k-spacing(0.5);
         }
 
         .k-scheduler-mark {
@@ -908,7 +908,7 @@
         .k-scheduler-datetime-picker {
             display: flex;
             flex-flow: row nowrap;
-            gap: map.get( $kendo-spacing, 1 );
+            gap: k-spacing(1);
         }
 
     }