feat(fluent): integrate radii module

packages/fluent/scss/bottom-navigation/_variables.scss

@@ -43,7 +43,7 @@ $kendo-bottom-nav-item-max-width: none !default;
 $kendo-bottom-nav-item-min-height: calc( var( --kendo-icon-size, 1.5rem ) * 2 + (#{$kendo-bottom-nav-item-padding-y} * 2) ) !default;
 /// The border radius of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-bottom-nav-item-border-radius: k-border-radius(md) !default;
 /// The spacing of the BottomNavigation item.
 /// @group bottom-navigation
 $kendo-bottom-nav-item-gap: k-spacing(1) !default;

packages/fluent/scss/card/_variables.scss

@@ -13,7 +13,7 @@ $kendo-card-padding-y: k-spacing(3) !default;
 $kendo-card-border-width: 0px !default;
 /// The border radius of the Card.
 /// @group card
-$kendo-card-border-radius: $kendo-border-radius-md !default;
+$kendo-card-border-radius: k-border-radius(md) !default;
 /// The inner border radius of the Card.
 /// @group card
 $kendo-card-inner-border-radius: calc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} ) !default;

packages/fluent/scss/color-preview/_variables.scss

@@ -2,7 +2,7 @@
 
 /// Border radius of the color preview.
 /// @group color-preview
-$kendo-color-preview-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-color-preview-border-radius: k-border-radius(md) !default;
 /// Border width of the color preview.
 /// @group color-preview
 $kendo-color-preview-border-width: 1px !default;

packages/fluent/scss/coloreditor/_variables.scss

@@ -14,7 +14,7 @@ $kendo-color-editor-min-width: 260px !default;
 $kendo-color-editor-border-width: 1px !default;
 /// The border radius of the ColorEditor.
 /// @group coloreditor
-$kendo-color-editor-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-color-editor-border-radius: k-border-radius(md) !default;
 /// The font family of the ColorEditor.
 /// @group coloreditor
 $kendo-color-editor-font-family: var( --kendo-font-family, inherit ) !default;

packages/fluent/scss/colorgradient/_variables.scss

@@ -14,7 +14,7 @@ $kendo-color-gradient-width: 260px !default;
 $kendo-color-gradient-border-width: 2px !default;
 /// The border radius of the ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-color-gradient-border-radius: k-border-radius(md) !default;
 /// The vertical padding of the ColorGradient.
 /// @group cologradient
 $kendo-color-gradient-padding-y: $kendo-color-gradient-spacer !default;
@@ -59,7 +59,7 @@ $kendo-color-gradient-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !def
 $kendo-color-gradient-canvas-border-width: 0 !default;
 /// The border radius of the ColorGradient canvas.
 /// @group cologradient
-$kendo-color-gradient-canvas-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-color-gradient-canvas-border-radius: k-border-radius(md) !default;
 /// The spacing between the items of the ColorGradient canvas.
 /// @group cologradient
 $kendo-color-gradient-canvas-spacing: calc( #{$kendo-color-gradient-spacer} / 2 ) !default;
@@ -78,7 +78,7 @@ $kendo-color-gradient-canvas-draghandle-shadow: var( --kendo-box-shadow-depth-2,
 $kendo-color-gradient-slider-track-size: 20px !default;
 /// The border radius of the ColorGradient slider.
 /// @group cologradient
-$kendo-color-gradient-slider-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-color-gradient-slider-border-radius: k-border-radius(md) !default;
 /// The width of the border around the ColorGradient slider.
 /// @group cologradient
 $kendo-color-gradient-slider-border-width: if($kendo-enable-color-system, 0, 1px) !default;

packages/fluent/scss/core/_index.scss

@@ -13,6 +13,9 @@
 // Spacing
 @use "./spacing" as *;
 
+// Radii
+@use "./border-radii/" as *;
+
 // Variables
 @forward "./variables";
 
@@ -58,6 +61,9 @@
     $kendo-font-family: $kendo-font-family !default,
     $kendo-font-sizes: $kendo-font-sizes !default,
     $kendo-line-heights: $kendo-line-heights !default,
+    // Radii
+    $_default-border-radii: $kendo-border-radii,
+    $kendo-border-radii: $kendo-border-radii !default
 );
 
 @forward "./color-system/swatch-legacy";

packages/fluent/scss/core/_variables.scss

@@ -1,7 +1,6 @@
 @use "sass:map";
 @use "sass:math";
 @use "sass:meta";
-@use "./typography/" as *;
 
 // Options
 $kendo-enable-typography: false !default;

packages/fluent/scss/core/border-radii/_index.scss

@@ -0,0 +1,24 @@
+@use "sass:map";
+@use "@progress/kendo-theme-core/scss/spacing/index.import.scss" as *;
+
+$kendo-border-radius-none: map.get($kendo-spacing, 0) !default;
+$kendo-border-radius-xs: map.get($kendo-spacing, 1px) !default;
+$kendo-border-radius-sm: map.get($kendo-spacing, 0.5) !default;
+$kendo-border-radius-md: map.get($kendo-spacing, 1) !default;
+$kendo-border-radius-lg: map.get($kendo-spacing, 2) !default;
+$kendo-border-radius-xl: map.get($kendo-spacing, 3) !default;
+$kendo-border-radius-xxl: map.get($kendo-spacing, 4) !default;
+$kendo-border-radius-xxxl: map.get($kendo-spacing, 5) !default;
+
+$_default-border-radii: (
+    none: $kendo-border-radius-none,
+    xs: $kendo-border-radius-xs,
+    sm: $kendo-border-radius-sm,
+    md: $kendo-border-radius-md,
+    lg: $kendo-border-radius-lg,
+    xl: $kendo-border-radius-xl,
+    xxl: $kendo-border-radius-xxl,
+    xxxl: $kendo-border-radius-xxxl
+) !default;
+
+$kendo-border-radii: $_default-border-radii !default;

packages/fluent/scss/core/color-system/_swatch-legacy.scss

@@ -93,8 +93,4 @@
     --kendo-invalid-text: #{core.$kendo-invalid-text};
     --kendo-invalid-border: #{core.$kendo-invalid-border};
     --kendo-invalid-shadow: #{core.$kendo-invalid-shadow};
-
-    --kendo-border-radius-sm: #{core.$kendo-border-radius-sm};
-    --kendo-border-radius-md: #{core.$kendo-border-radius-md};
-    --kendo-border-radius-lg: #{core.$kendo-border-radius-lg};
 }

packages/fluent/scss/dataviz/_layout.scss

@@ -86,7 +86,7 @@
     }
 
     .k-chart-tooltip {
-        @include border-radius( var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) );
+        @include border-radius( k-border-radius(md) );
         font-size: var( --kendo-chart-tooltip-font-size, #{$kendo-chart-tooltip-font-size} );
         line-height: var( --kendo-chart-tooltip-line-height, #{$kendo-chart-tooltip-line-height} );
         padding-inline: var( --kendo-chart-tooltip-padding-x, #{$kendo-tooltip-padding-x} );
@@ -200,7 +200,7 @@
     }
 
     .k-navigator-hint .k-scroll {
-        @include border-radius( var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) );
+        @include border-radius( k-border-radius(md) );
         position: absolute;
         height: 4px;
     }
@@ -392,7 +392,7 @@
         base: $kendo-component-bg,
         background: $kendo-component-bg,
 
-        border-radius: $kendo-border-radius-md,
+        border-radius: k-border-radius(md),
 
         normal-background: $kendo-component-bg,
         normal-text-color: $kendo-component-text,

packages/fluent/scss/draggable/_variables.scss

@@ -1,10 +1,10 @@
 @use "sass:math";
 @use "../core/" as *;
-@use "../core/spacing" as *;
+@use "../core/spacing/" as *;
 
 /// Borer radius of the drag clue.
 /// @group draggable
-$kendo-drag-clue-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-drag-clue-border-radius: k-border-radius(md) !default;
 /// Borer width of the drag clue.
 /// @group draggable
 $kendo-drag-clue-border-width: 0px !default;

packages/fluent/scss/editor/_layout.scss

@@ -40,7 +40,7 @@
 
     // Inline editor
     .k-editor-inline {
-        @include border-radius( $kendo-border-radius-md );
+        @include border-radius( k-border-radius(md) );
         padding-block: $kendo-padding-sm-y;
         padding-inline: $kendo-padding-sm-x;
         border: 1px solid transparent;
@@ -414,7 +414,7 @@
             white-space: nowrap;
             overflow: hidden;
             cursor: pointer;
-            @include border-radius( $kendo-border-radius-md );
+            @include border-radius( k-border-radius(md) );
 
             .k-i-file,
             .k-i-folder {

packages/fluent/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;
@@ -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;

packages/fluent/scss/gantt/_layout.scss

@@ -533,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;
@@ -566,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;

packages/fluent/scss/grid/_variables.scss

@@ -362,8 +362,8 @@ $kendo-grid-group-indicator-padding-y: $kendo-button-md-padding-y !default;
 $kendo-grid-group-indicator-border-width: $kendo-button-border-width !default;
 /// The border radius of the Grid group indicator.
 /// @group grid
-$kendo-grid-group-indicator-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
-/// The spacing of the Grid group indicator.
+$kendo-grid-group-indicator-border-radius: k-border-radius(md) !default;
+/// Spacing of the grid group indicator.
 /// @group grid
 $kendo-grid-group-indicator-gap: $kendo-table-cell-padding-y !default;
 /// The text color of the Grid group indicator.

packages/fluent/scss/index.scss

@@ -348,6 +348,8 @@
 
     // Core typography
     @include kendo-core--typography--styles();
+    // Radii
+    @include kendo-border-radius--styles();
 
     // Typography and utils
     @include typography-styles();

packages/fluent/scss/listgroup/_variables.scss

@@ -7,7 +7,7 @@
 $kendo-listgroup-border-width: 1px !default;
 /// Border radius of the listgroup.
 /// @group listgroup
-$kendo-listgroup-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-listgroup-border-radius: k-border-radius(md) !default;
 
 /// Font size of the listgroup.
 /// @group listgroup

packages/fluent/scss/loader/_variables.scss

@@ -91,7 +91,7 @@ $kendo-loader-container-panel-border-style: solid !default;
 $kendo-loader-container-panel-border-color: var( --kendo-component-border, initial ) !default;
 /// The border radius of the container panel.
 /// @group loader
-$kendo-loader-container-panel-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-loader-container-panel-border-radius: k-border-radius(md) !default;
 /// The background color of the container panel.
 /// @group loader
 $kendo-loader-container-panel-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;

packages/fluent/scss/orgchart/_variables.scss

@@ -51,7 +51,7 @@ $kendo-orgchart-node-group-padding-x: $kendo-orgchart-node-group-padding-y !defa
 $kendo-orgchart-node-group-border-width: 1px !default;
 /// The border radius of the OrgChart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-orgchart-node-group-border-radius: k-border-radius(md) !default;
 /// The background color of the OrgChart node group.
 /// @group orgchart
 $kendo-orgchart-node-group-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;

packages/fluent/scss/pdf-viewer/_variables.scss

@@ -65,7 +65,7 @@ $kendo-pdf-viewer-search-panel-spacing: k-spacing(2) !default;
 $kendo-pdf-viewer-search-panel-border-width: 1px !default;
 /// The border radius of the PDFViewer search panel.
 /// @group pdf-viewer
-$kendo-pdf-viewer-search-panel-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-pdf-viewer-search-panel-border-radius: k-border-radius(md) !default;
 /// The background color of the PDFViewer search panel.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-bg: var( --kendo-component-bg, inherit ) !default;

packages/fluent/scss/pivotgrid/_variables.scss

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

packages/fluent/scss/popup/_variables.scss

@@ -12,7 +12,7 @@ $kendo-popup-padding-y: k-spacing(0) !default;
 $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

packages/fluent/scss/prompt/_variables.scss

@@ -52,7 +52,7 @@ $kendo-prompt-suggestion-padding-y: k-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;

packages/fluent/scss/scheduler/_variables.scss

@@ -64,7 +64,7 @@ $kendo-scheduler-footer-gradient: null !default; // $kendo-toolbar-gradient
 
 /// Border radius of the scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-scheduler-event-border-radius: k-border-radius(md) !default;
 /// Line height of the scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-line-height: $kendo-scheduler-line-height !default;

packages/fluent/scss/skeleton/_variables.scss

@@ -5,11 +5,11 @@
 $kendo-skeleton-text-transform: scale( 1, .6 ) !default;
 /// The border radius of the Skeleton text.
 /// @group skeleton
-$kendo-skeleton-text-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-skeleton-text-border-radius: k-border-radius(md) !default;
 
 /// The border radius of the rectangular Skeleton.
 /// @group skeleton
-$kendo-skeleton-rect-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-skeleton-rect-border-radius: k-border-radius(md) !default;
 
 /// The border radius of the circular Skeleton.
 /// @group skeleton

packages/fluent/scss/spreadsheet/_layout.scss

@@ -530,7 +530,7 @@
         box-sizing: border-box;
     }
     .k-spreadsheet-filter {
-        @include border-radius( $kendo-border-radius );
+        @include border-radius( k-border-radius(md) );
         padding: var( --kendo-padding-y, #{$kendo-padding-md-y} );
         line-height: 1;
         position: absolute;

packages/fluent/scss/tabstrip/_variables.scss

@@ -55,7 +55,7 @@ $kendo-tabstrip-item-padding-y: calc( #{k-spacing(2)} + #{k-spacing(1)} ) !defau
 $kendo-tabstrip-item-border-width: 0px !default;
 /// The border radius of the tabstrip item
 /// @group tabstrip
-$kendo-tabstrip-item-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-tabstrip-item-border-radius: k-border-radius(md) !default;
 /// The gap between the tabstrip items
 /// @group tabstrip
 $kendo-tabstrip-item-gap: k-spacing(2) !default;

packages/fluent/scss/taskboard/_variables.scss

@@ -66,7 +66,7 @@ $kendo-taskboard-column-width: 320px !default;
 $kendo-taskboard-column-border-width: 1px !default;
 /// The border radius of the TaskBoard column.
 /// @group taskboard
-$kendo-taskboard-column-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-taskboard-column-border-radius: k-border-radius(md) !default;
 /// The background color of the TaskBoard column.
 /// @group taskboard
 $kendo-taskboard-column-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;

packages/fluent/scss/timeline/_variables.scss

@@ -164,7 +164,7 @@ $kendo-timeline-vertical-padding-calc: calc( #{ $kendo-timeline-spacing-x } + (
 $kendo-timeline-vertical-padding-with-dates-calc: calc( #{ $kendo-timeline-vertical-padding-calc } + #{ $kendo-timeline-date-width } ) !default;
 /// The border radius of the vertical Timeline.
 /// @group timeline
-$kendo-timeline-vertical-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-lg} ) !default;
+$kendo-timeline-vertical-border-radius: k-border-radius(lg) !default;
 /// The padding of the vertical mobile Timeline.
 /// @group timeline
 $kendo-timeline-mobile-vertical-padding-calc: calc( #{ $kendo-timeline-mobile-spacing-x } + ( #{ $kendo-timeline-flag-min-width } - #{ $kendo-timeline-track-size } ) / 2 ) !default;

packages/fluent/scss/tooltip/_variables.scss

@@ -3,7 +3,7 @@
 
 /// The border radius of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-border-radius: $kendo-border-radius !default;
+$kendo-tooltip-border-radius: k-border-radius(md) !default;
 /// The horizontal padding of the Tooltip.
 /// @group tooltip
 $kendo-tooltip-padding-x: k-spacing(2) !default;

packages/fluent/scss/treeview/_variables.scss

@@ -49,7 +49,7 @@ $kendo-treeview-lg-item-padding-y: k-spacing(2.5) !default;
 $kendo-treeview-item-border-width: 0 !default;
 /// The border radius of the TreeView items.
 /// @group treeview
-$kendo-treeview-item-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-treeview-item-border-radius: k-border-radius(md) !default;
 
 /// The horizontal padding of the TreeViews' filter element.
 /// @group treeview

packages/fluent/scss/window/_variables.scss

@@ -6,7 +6,7 @@
 $kendo-window-border-width: k-spacing(1) 0 0 !default;
 /// The border radius of the Window.
 /// @group window
-$kendo-window-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+$kendo-window-border-radius: k-border-radius(md) !default;
 /// The font family of the Window.
 /// @group window
 $kendo-window-font-family: var( --kendo-font-family, inherit ) !default;