feat(bootstrap): integrate radii module

packages/bootstrap/scss/_variables.scss

@@ -25,22 +25,6 @@ $kendo-icon-size-xl: calc( #{$kendo-icon-size} * 1.5 ) !default;
 $kendo-icon-size-xxl: calc( #{$kendo-icon-size} * 2 ) !default;
 $kendo-icon-size-xxxl: calc( #{$kendo-icon-size} * 3 ) !default;
 
-/// Border radius for all components.
-$kendo-border-radius: $border-radius !default;
-$kendo-border-radius-sm: $border-radius-sm !default;
-$kendo-border-radius-md: $kendo-border-radius !default;
-$kendo-border-radius-lg: $border-radius-lg !default;
-
-$kendo-border-radii: (
-    DEFAULT: $kendo-border-radius-md,
-    0: 0,
-    sm: $kendo-border-radius-sm,
-    md: $kendo-border-radius-md,
-    lg: $kendo-border-radius-lg,
-    full: 9999px
-) !default;
-
-
 $kendo-zindex-popup: 1 !default;
 $kendo-zindex-window: 2 !default;
 $kendo-zindex-loading: 100 !default;

packages/bootstrap/scss/breadcrumb/_variables.scss

@@ -90,7 +90,7 @@ $kendo-breadcrumb-lg-link-padding-y: k-spacing(2.5) !default;
 
 /// The border-radius of the Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-border-radius: $kendo-border-radius-md !default;
+$kendo-breadcrumb-link-border-radius: k-border-radius(md) !default;
 
 /// The vertical padding of the Breadcrumb link icon.
 /// @group breadcrumb

packages/bootstrap/scss/calendar/_variables.scss

@@ -70,7 +70,7 @@ $kendo-calendar-cell-line-height: $kendo-calendar-line-height !default;
 
 /// The border radius of the cells in the Calendar.
 /// @group calendar
-$kendo-calendar-cell-border-radius: $kendo-border-radius-md !default;
+$kendo-calendar-cell-border-radius: k-border-radius(md) !default;
 
 /// The horizontal padding of the header cells in the Calendar.
 /// @group calendar

packages/bootstrap/scss/checkbox/_layout.scss

@@ -7,13 +7,13 @@
 
     // Override inherited bootstrap border radius
     .k-checkbox.k-rounded-sm {
-        border-radius: k-math-div( $kendo-border-radius-sm, 2 );
+        border-radius: calc( #{k-border-radius(sm)} / 2 );
     }
     .k-checkbox.k-rounded-md {
-        border-radius: $kendo-border-radius-sm;
+        border-radius: k-border-radius(sm);
     }
     .k-checkbox.k-rounded-lg {
-        border-radius: $kendo-border-radius-md;
+        border-radius: k-border-radius(md);
     }
 
 }

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

@@ -1,5 +1,5 @@
 // Color Preview
-$kendo-color-preview-border-radius: $kendo-border-radius-md !default;
+$kendo-color-preview-border-radius: k-border-radius(md) !default;
 $kendo-color-preview-border-width: 1px !default;
 $kendo-color-preview-bg: null !default;
 $kendo-color-preview-text: null !default;

packages/bootstrap/scss/coloreditor/_variables.scss

@@ -12,7 +12,7 @@ $kendo-color-editor-min-width: 328px !default;
 $kendo-color-editor-border-width: 1px !default;
 /// The border radius of the ColorEditor.
 /// @group coloreditor
-$kendo-color-editor-border-radius: $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/bootstrap/scss/colorgradient/_variables.scss

@@ -14,7 +14,7 @@ $kendo-color-gradient-width: 328px !default;
 $kendo-color-gradient-border-width: 1px !default;
 /// The border radius of the ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-border-radius: $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;
@@ -52,7 +52,7 @@ $kendo-color-gradient-focus-shadow: null !default;
 
 /// The border radius of the ColorGradient canvas.
 /// @group cologradient
-$kendo-color-gradient-canvas-border-radius: $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-gap: k-spacing(3) !default;

packages/bootstrap/scss/core/_index.scss

@@ -14,6 +14,9 @@ $wcag-min-contrast-ratio: 4.5 !default;
 // Spacing
 @import "./spacing/index.import.scss";
 
+// Radii
+@import "./border-radii/index.import.scss";
+
 @import "@progress/kendo-theme-core/scss/index.import.scss";
 
 // Backward compatibility
@@ -29,4 +32,6 @@ $wcag-min-contrast-ratio: 4.5 !default;
     @include kendo-core--typography--styles();
     // Spacing
     @include kendo-spacing--styles();
+    // Radii
+    @include kendo-border-radius--styles();
 }

packages/bootstrap/scss/core/border-radii/index.import.scss

@@ -0,0 +1,23 @@
+$kendo-border-radius: $border-radius !default;
+$kendo-border-radius-xs: k-map-get($kendo-spacing, 0.5) !default;
+$kendo-border-radius-sm: $border-radius-sm !default;
+$kendo-border-radius-md: $kendo-border-radius !default;
+$kendo-border-radius-lg: $border-radius-lg !default;
+$kendo-border-radius-xl: k-map-get($kendo-spacing, 3) !default;
+$kendo-border-radius-xxl: k-map-get($kendo-spacing, 4) !default;
+$kendo-border-radius-xxxl: k-map-get($kendo-spacing, 8) !default;
+$kendo-border-radius-full: 50rem !default;
+
+
+$kendo-border-radii: (
+    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,
+    full: $kendo-border-radius-full
+) !default;
+
+@import "@progress/kendo-theme-core/scss/border-radii/index.import.scss";

packages/bootstrap/scss/dock-manager/_variables.scss

@@ -104,7 +104,7 @@ $kendo-dock-manager-dock-preview-border-width: 1px !default;
 $kendo-dock-manager-dock-preview-border-style: dashed !default;
 /// The border radius of the dropping area in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-dock-preview-border-radius: $kendo-border-radius-sm !default;
+$kendo-dock-manager-dock-preview-border-radius: k-border-radius(sm) !default;
 /// The background color of the dropping area in the DockManager component.
 /// @group dock-manager
 $kendo-dock-manager-dock-preview-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 16%, transparent), rgba( $kendo-color-primary, .16 )) !default;

packages/bootstrap/scss/draggable/_variables.scss

@@ -2,7 +2,7 @@
 $kendo-drag-hint-padding-x: $btn-padding-x !default;
 $kendo-drag-hint-padding-y: $btn-padding-y !default;
 $kendo-drag-hint-border-width: 1px !default;
-$kendo-drag-hint-border-radius: $kendo-border-radius-md !default;
+$kendo-drag-hint-border-radius: k-border-radius(md) !default;
 $kendo-drag-hint-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-drag-hint-font-family: var( --kendo-font-family, inherit )!default;
 $kendo-drag-hint-line-height: var( --kendo-line-height, normal ) !default;

packages/bootstrap/scss/fab/_variables.scss

@@ -5,7 +5,7 @@
 $kendo-fab-border-width: 1px !default;
 /// The border radius of the FAB.
 /// @group floating-action-button
-$kendo-fab-border-radius: k-math-div( $kendo-border-radius, 2 ) !default;
+$kendo-fab-border-radius: calc( #{k-border-radius(md)} / 2 ) !default;
 /// The font family of the FAB.
 /// @group floating-action-button
 $kendo-fab-font-family: var( --kendo-font-family, inherit ) !default;

packages/bootstrap/scss/loader/_variables.scss

@@ -79,7 +79,7 @@ $kendo-loader-container-panel-border-style: solid !default;
 $kendo-loader-container-panel-border-color: $kendo-component-border !default;
 /// The border radius of the container panel.
 /// @group loader
-$kendo-loader-container-panel-border-radius: $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: $kendo-color-white !default;

packages/bootstrap/scss/menu/_layout.scss

@@ -27,7 +27,7 @@
         }
 
         .k-context-menu {
-            @include border-radius( $kendo-border-radius-md );
+            @include border-radius( k-border-radius(md) );
         }
 
         .k-header {

packages/bootstrap/scss/orgchart/_variables.scss

@@ -49,7 +49,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: $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: $kendo-base-bg !default;

packages/bootstrap/scss/pivotgrid/_variables.scss

@@ -84,7 +84,7 @@ $kendo-pivotgrid-configurator-button-size: calc( calc( #{$kendo-pivotgrid-line-h
 $kendo-pivotgrid-calculated-field-padding-x: $kendo-pivotgrid-spacer !default;
 $kendo-pivotgrid-calculated-field-padding-y: $kendo-pivotgrid-spacer !default;
 $kendo-pivotgrid-calculated-field-border-width: 1px !default;
-$kendo-pivotgrid-calculated-field-border-radius: $kendo-border-radius-md !default;
+$kendo-pivotgrid-calculated-field-border-radius: k-border-radius(md) !default;
 $kendo-pivotgrid-calculated-field-gap: $kendo-pivotgrid-spacer !default;
 
 $kendo-pivotgrid-calculated-field-bg: $kendo-component-bg !default;

packages/bootstrap/scss/popup/_variables.scss

@@ -9,7 +9,7 @@ $kendo-popup-padding-y: null !default;
 $kendo-popup-border-width: 1px !default;
 /// Border radius of the popup.
 /// @group popup
-$kendo-popup-border-radius: $kendo-border-radius-md !default;
+$kendo-popup-border-radius: k-border-radius(md) !default;
 
 /// Font size of the popup.
 /// @group popup

packages/bootstrap/scss/prompt/_variables.scss

@@ -51,7 +51,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: $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: $kendo-component-text !default;

packages/bootstrap/scss/scheduler/_variables.scss

@@ -19,7 +19,7 @@ $kendo-scheduler-footer-border: $kendo-toolbar-border !default;
 $kendo-scheduler-footer-gradient: $kendo-toolbar-gradient !default;
 
 $kendo-scheduler-event-min-height: 25px !default;
-$kendo-scheduler-event-border-radius: $kendo-border-radius-md !default;
+$kendo-scheduler-event-border-radius: k-border-radius(md) !default;
 $kendo-scheduler-event-line-height: calc( #{$kendo-scheduler-event-min-height} - (2 * #{$kendo-padding-sm-y}) ) !default;
 
 $kendo-scheduler-event-bg: if($kendo-enable-color-system, k-color( primary ), k-color-tint( $kendo-selected-bg, 2 )) !default;
@@ -86,7 +86,7 @@ $kendo-scheduler-tooltip-events-gap: k-spacing(2) !default;
 
 $kendo-scheduler-tooltip-event-padding-x: k-spacing(2) !default;
 $kendo-scheduler-tooltip-event-padding-y: k-spacing(1) !default;
-$kendo-scheduler-tooltip-event-border-radius: $kendo-border-radius-md !default;
+$kendo-scheduler-tooltip-event-border-radius: k-border-radius(md) !default;
 $kendo-scheduler-tooltip-event-gap: k-spacing(2) !default;
 
 $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;

packages/bootstrap/scss/skeleton/_variables.scss

@@ -5,7 +5,7 @@
 $kendo-skeleton-text-transform: scale( 1, .6 ) !default;
 /// The border radius of the Skeleton text.
 /// @group skeleton
-$kendo-skeleton-text-border-radius: $kendo-border-radius-md !default;
+$kendo-skeleton-text-border-radius: k-border-radius(md) !default;
 
 /// The border radius of the rectangular Skeleton.
 /// @group skeleton

packages/bootstrap/scss/spreadsheet/_variables.scss

@@ -213,13 +213,13 @@ $kendo-spreadsheet-insert-image-dialog-preview-img: "image-default.png" !default
 $kendo-spreadsheet-insert-image-dialog-preview-border: $kendo-component-border !default;
 /// The border radius of the Spreadsheet image Dialog preview.
 /// @group spreadsheet
-$kendo-spreadsheet-insert-image-dialog-preview-border-radius: $kendo-border-radius-md !default;
+$kendo-spreadsheet-insert-image-dialog-preview-border-radius: k-border-radius(md) !default;
 /// The shadow of the Spreadsheet image Dialog preview.
 /// @group spreadsheet
 $kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow: inset 0 0 0 2000px rgba( black, .5 ) !default;
 /// The border radius of the Spreadsheet image Dialog preview overlay.
 /// @group spreadsheet
-$kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius: $kendo-border-radius-md !default;
+$kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius: k-border-radius(md) !default;
 /// The text color of the hovered Spreadsheet image Dialog preview.
 /// @group spreadsheet
 $kendo-spreadsheet-insert-image-dialog-overlay-hover-text: $kendo-component-bg !default;
@@ -247,7 +247,7 @@ $kendo-spreadsheet-drawing-handle-border-color: $kendo-selected-bg !default;
 $kendo-spreadsheet-drawing-handle-bg: $kendo-color-primary !default;
 /// The border radius of the Spreadsheet drawing handle.
 /// @group spreadsheet
-$kendo-spreadsheet-drawing-handle-border-radius: $kendo-border-radius-lg !default;
+$kendo-spreadsheet-drawing-handle-border-radius: k-border-radius(lg) !default;
 
 /// The outline style of the Spreadsheet drawing.
 /// @group spreadsheet

packages/bootstrap/scss/taskboard/_variables.scss

@@ -75,7 +75,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: $kendo-border-radius-sm !default;
+$kendo-taskboard-column-border-radius: k-border-radius(sm) !default;
 /// The background color of the TaskBoard column.
 /// @group taskboard
 $kendo-taskboard-column-bg: if($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $gray-900, $gray-100 )) !default;

packages/bootstrap/scss/window/_variables.scss

@@ -7,7 +7,7 @@
 $kendo-window-border-width: 1px !default;
 /// The border radius of the Window.
 /// @group window
-$kendo-window-border-radius: $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;