feat: use utility class names from utils package

BREAKING CHANGE: Use utility class names from utils package Previously, the utility classes were defined in the default theme and were consumed from the derived themes. While no class names were changed, we did try to move to a more consistent naming convention for the class names. For example, the class name for `display: flex` was changed from `k-display-flex` to `k-d-flex`, as it's shorter and unambiguous. Of course, the old class names are still supported and will be removed in the next major version.
telerik · Jan 4, 2023 · e4ab60e · e4ab60e
1 parent dd8285b
commit e4ab60e
Show file tree

Hide file tree

Showing 322 changed files with 737 additions and 2,113 deletions.
diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss
@@ -85,6 +85,15 @@ $kendo-border-radius-sm: k-math-div( $kendo-border-radius, 2 ) !default;
 $kendo-border-radius-md: $kendo-border-radius !default;
 $kendo-border-radius-lg: $kendo-border-radius * 1.5 !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;
@@ -192,6 +201,51 @@ $kendo-theme-colors: (
 ) !default;
 
 
+// Typography
+
+/// Base font size across all components.
+/// @group typography
+$font-size: $font-size-base !default;
+$font-size-xs: ( $font-size * .75 ) !default;
+$font-size-sm: $font-size-sm !default;
+$font-size-md: $font-size !default;
+$font-size-lg: $font-size-lg !default;
+$font-size-xl: ( $font-size-md * 1.5 ) !default;
+
+$kendo-font-sizes: (
+    xs: $font-size-xs,
+    sm: $font-size-sm,
+    md: $font-size-md,
+    lg: $font-size-lg,
+    xl: $font-size-xl
+) !default;
+
+/// Font family across all components.
+/// @group typography
+$font-family: $font-family-sans-serif !default;
+
+/// Font family for monospaced text. Used for styling the code.
+/// @group typography
+$font-family-monospace: $font-family-monospace !default;
+
+/// Line height used along with $font-size.
+/// @group typography
+$line-height: $line-height-base !default;
+$line-height-xs: 1 !default;
+$line-height-sm: $line-height-sm !default;
+$line-height-md: $line-height !default;
+$line-height-lg: $line-height-lg !default;
+$line-height-em: calc( #{$line-height} * 1em ) !default;
+
+// Font weight
+$font-weight-light: $font-weight-light !default;
+$font-weight-normal: $font-weight-normal !default;
+$font-weight-bold: $font-weight-bold !default;
+
+// Letter Spacing
+$letter-spacing: null !default;
+
+
 // Root styles
 $kendo-body-bg: $kendo-color-white !default;
 $kendo-body-text: k-contrast-color( $kendo-body-bg, $gray-900, $gray-100 ) !default;
@@ -270,13 +324,9 @@ $kendo-disabled-styling: (
 ) !default;
 
 
-
 // Generic styles
 
 // TODO: refactor once we extract drag drop as separate module
-$font-size: $font-size-base !default;
-$font-family: $font-family-sans-serif !default;
-$line-height: $line-height-base !default;
 
 
 // Header

diff --git a/packages/bootstrap/scss/badge/_index.scss b/packages/bootstrap/scss/badge/_index.scss
@@ -2,7 +2,7 @@
 
 
 // Dependencies
-@import "../utils/_position.scss";
+// @import "../utils/_position.scss";
 @import "../icons/_index.scss";
 
 

diff --git a/packages/bootstrap/scss/bottom-navigation/_index.scss b/packages/bootstrap/scss/bottom-navigation/_index.scss
@@ -3,7 +3,7 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_position.scss";
+// @import "../utils/_position.scss";
 @import "../icons/_index.scss";
 
 

diff --git a/packages/bootstrap/scss/breadcrumb/_variables.scss b/packages/bootstrap/scss/breadcrumb/_variables.scss
@@ -1,4 +1,8 @@
+@import "../typography/_variables.scss";
+
+
 // Breadcrumb
+
 $breadcrumb-margin-x: null !default;
 $breadcrumb-margin-y: null !default;
 $breadcrumb-padding-x: null !default;

diff --git a/packages/bootstrap/scss/button/_index.scss b/packages/bootstrap/scss/button/_index.scss
@@ -4,7 +4,6 @@
 // Dependencies
 @import "../badge/_index.scss";
 @import "../icons/_index.scss";
-@import "../typography/_variables.scss";
 
 
 // Component

diff --git a/packages/bootstrap/scss/calendar/_variables.scss b/packages/bootstrap/scss/calendar/_variables.scss
@@ -1,4 +1,8 @@
+@import "../typography/_variables.scss";
+
+
 // Calendar
+
 $calendar-border-width: 1px !default;
 $calendar-font-family: $font-family !default;
 $calendar-font-size: $font-size !default;

diff --git a/packages/bootstrap/scss/captcha/_index.scss b/packages/bootstrap/scss/captcha/_index.scss
@@ -2,7 +2,7 @@
 
 
 // Dependencies
-@import "../utils/_index.scss";
+// @import "../utils/_index.scss";
 @import "../common/_index.scss";
 @import "../icons/_index.scss";
 @import "../input/_index.scss";

diff --git a/packages/bootstrap/scss/card/_index.scss b/packages/bootstrap/scss/card/_index.scss
@@ -3,8 +3,8 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_flex.scss";
-@import "../utils/_grid.scss";
+// @import "../utils/_flex.scss";
+// @import "../utils/_grid.scss";
 @import "../action-buttons/_index.scss";
 @import "../icons/_index.scss";
 @import "../typography/_index.scss";

diff --git a/packages/bootstrap/scss/checkbox/_index.scss b/packages/bootstrap/scss/checkbox/_index.scss
@@ -2,8 +2,6 @@
 
 
 // Dependencies
-@import "../typography/_variables.scss";
-@import "../list/_variables.scss";
 
 
 // Component

diff --git a/packages/bootstrap/scss/checkbox/_variables.scss b/packages/bootstrap/scss/checkbox/_variables.scss
@@ -1,3 +1,6 @@
+@import "../list/_variables.scss";
+
+
 // Checkbox
 
 /// Border width of checkbox.

diff --git a/packages/bootstrap/scss/chip/_index.scss b/packages/bootstrap/scss/chip/_index.scss
@@ -3,7 +3,6 @@
 
 // Dependencies
 @import "../icons/_index.scss";
-@import "../button/_variables.scss";
 
 
 // Component

diff --git a/packages/bootstrap/scss/chip/_variables.scss b/packages/bootstrap/scss/chip/_variables.scss
@@ -1,3 +1,6 @@
+@import "../button/_variables.scss";
+
+
 // Chip
 
 /// Width of the border around the button.

diff --git a/packages/bootstrap/scss/colorgradient/_index.scss b/packages/bootstrap/scss/colorgradient/_index.scss
@@ -3,8 +3,8 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_flex.scss";
-@import "../utils/_spacer.scss";
+// @import "../utils/_flex.scss";
+// @import "../utils/_spacer.scss";
 @import "../icons/_index.scss";
 @import "../button/_index.scss";
 @import "../slider/_index.scss";

diff --git a/packages/bootstrap/scss/colorpalette/_index.scss b/packages/bootstrap/scss/colorpalette/_index.scss
@@ -3,7 +3,7 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_flex.scss";
+// @import "../utils/_flex.scss";
 
 // Component
 @import "./_variables.scss";

diff --git a/packages/bootstrap/scss/common/_index.scss b/packages/bootstrap/scss/common/_index.scss
@@ -1,5 +1,3 @@
-@import "../typography/_variables.scss";
-
 @import "./_base.scss";
 @import "./_animations.scss";
 @import "./_resizing.scss";

diff --git a/packages/bootstrap/scss/dataviz/_index.scss b/packages/bootstrap/scss/dataviz/_index.scss
@@ -5,7 +5,6 @@
 @import "../common/_index.scss";
 @import "../popup/_index.scss";
 @import "../tooltip/_index.scss";
-@import "../button/_variables.scss";
 
 
 // Component

diff --git a/packages/bootstrap/scss/dataviz/_variables.scss b/packages/bootstrap/scss/dataviz/_variables.scss
@@ -1,4 +1,8 @@
+@import "../button/_variables.scss";
+
+
 // Chart
+
 /// The first base series color and its light and dark shades.
 /// @group charts
 $series-a: $blue !default;

diff --git a/packages/bootstrap/scss/dropdowngrid/_index.scss b/packages/bootstrap/scss/dropdowngrid/_index.scss
@@ -3,17 +3,14 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../table/_index.scss";
-@import "../input/_index.scss";
 @import "../floating-label/_index.scss";
-@import "../combobox/_index.scss";
+@import "../icons/_index.scss";
+@import "../input/_index.scss";
 @import "../popup/_index.scss";
-@import "../toolbar/_variables.scss";
-@import "../menu/_variables.scss";
-@import "../chip/_variables.scss";
-@import "../grid/_variables.scss";
+@import "../table/_index.scss";
 
 
 // Component
+@import "./_variables.scss";
 @import "./_layout.scss";
 @import "./_theme.scss";
diff --git a/packages/bootstrap/scss/dropdowngrid/_variables.scss b/packages/bootstrap/scss/dropdowngrid/_variables.scss
@@ -0,0 +1 @@
+// Dropdown grid
diff --git a/packages/bootstrap/scss/dropzone/_variables.scss b/packages/bootstrap/scss/dropzone/_variables.scss
@@ -1,4 +1,5 @@
 // Dropzone
+
 $dropzone-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 $dropzone-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $dropzone-border-width: 1px !default;

diff --git a/packages/bootstrap/scss/expansion-panel/_index.scss b/packages/bootstrap/scss/expansion-panel/_index.scss
@@ -3,8 +3,8 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_display.scss";
-@import "../utils/_spacer.scss";
+// @import "../utils/_display.scss";
+// @import "../utils/_spacer.scss";
 @import "../icons/_index.scss";
 @import "../list/_index.scss";
 

diff --git a/packages/bootstrap/scss/fab/_index.scss b/packages/bootstrap/scss/fab/_index.scss
@@ -3,7 +3,7 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_position.scss";
+// @import "../utils/_position.scss";
 @import "../icons/_index.scss";
 @import "../button/_index.scss";
 @import "../badge/_index.scss";

diff --git a/packages/bootstrap/scss/forms/_index.scss b/packages/bootstrap/scss/forms/_index.scss
@@ -3,12 +3,8 @@
 
 // Dependencies // TODO: extract variables
 @import "../common/_index.scss";
-@import "../tooltip/_variables.scss";
-@import "../button/_variables.scss";
-@import "../input/_variables.scss";
 @import "../toolbar/_index.scss";
 @import "../action-buttons/_index.scss";
-@import "../window/_variables.scss";
 
 
 // Component

diff --git a/packages/bootstrap/scss/forms/_variables.scss b/packages/bootstrap/scss/forms/_variables.scss
@@ -1,3 +1,9 @@
+@import "../input/_variables.scss";
+@import "../tooltip/_variables.scss";
+@import "../typography/_variables.scss";
+@import "../window/_variables.scss";
+
+
 // Forms
 $kendo-form-spacer: $kendo-padding-md-x * 2 !default;
 

diff --git a/packages/bootstrap/scss/grid/_index.scss b/packages/bootstrap/scss/grid/_index.scss
@@ -22,8 +22,8 @@
 @import "../pager/_index.scss";
 @import "../chip/_index.scss";
 @import "../skeleton/_index.scss";
-@import "../utils/_float.scss";
-@import "../utils/_spacer.scss";
+// @import "../utils/_float.scss";
+// @import "../utils/_spacer.scss";
 @import "../list/_index.scss";
 @import "../table/_index.scss";
 

diff --git a/packages/bootstrap/scss/listview/_index.scss b/packages/bootstrap/scss/listview/_index.scss
@@ -3,8 +3,8 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_flex.scss";
-@import "../utils/_grid.scss";
+// @import "../utils/_flex.scss";
+// @import "../utils/_grid.scss";
 @import "../pager/_index.scss";
 @import "../icons/_index.scss";
 

diff --git a/packages/bootstrap/scss/loader/_variables.scss b/packages/bootstrap/scss/loader/_variables.scss
@@ -1,4 +1,5 @@
 // Loader
+
 $kendo-loader-segment-border-radius: 50% !default;
 $kendo-loader-segment-size-sm: k-map-get( $kendo-spacing, 1 ) !default;
 $kendo-loader-segment-size-md: k-map-get( $kendo-spacing, 2 ) !default;

diff --git a/packages/bootstrap/scss/map/_index.scss b/packages/bootstrap/scss/map/_index.scss
@@ -3,7 +3,7 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_position.scss";
+// @import "../utils/_position.scss";
 @import "../button/_index.scss";
 @import "../scroller/_index.scss";
 @import "../icons/_index.scss";

diff --git a/packages/bootstrap/scss/multiselect/_index.scss b/packages/bootstrap/scss/multiselect/_index.scss
@@ -3,7 +3,6 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../forms/_variables.scss";
 @import "../button/_index.scss";
 @import "../input/_index.scss";
 @import "../chip/_index.scss";

diff --git a/packages/bootstrap/scss/orgchart/_index.scss b/packages/bootstrap/scss/orgchart/_index.scss
@@ -2,7 +2,7 @@
 
 
 // Dependencies
-@import "../utils/_index.scss";
+// @import "../utils/_index.scss";
 @import "../common/_index.scss";
 @import "../icons/_index.scss";
 @import "../forms/_index.scss";

diff --git a/packages/bootstrap/scss/pager/_index.scss b/packages/bootstrap/scss/pager/_index.scss
@@ -5,7 +5,6 @@
 @import "../common/_index.scss";
 @import "../dropdownlist/_index.scss";
 @import "../icons/_index.scss";
-@import "../toolbar/_variables.scss";
 @import "../list/_index.scss";
 @import "../button/_index.scss";
 

diff --git a/packages/bootstrap/scss/pager/_variables.scss b/packages/bootstrap/scss/pager/_variables.scss
@@ -1,3 +1,6 @@
+@import "../typography/_variables.scss";
+
+
 // Pager
 
 /// Horizontal padding of the pager according to the pager size.

diff --git a/packages/bootstrap/scss/panelbar/_variables.scss b/packages/bootstrap/scss/panelbar/_variables.scss
@@ -1,4 +1,8 @@
+@import "../typography/_variables.scss";
+
+
 // Panelbar
+
 $panelbar-padding-x: 0px !default;
 $panelbar-padding-y: 0px !default;
 $panelbar-font-family: $font-family !default;

diff --git a/packages/bootstrap/scss/pdf-viewer/_index.scss b/packages/bootstrap/scss/pdf-viewer/_index.scss
@@ -3,8 +3,7 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_index.scss";
-@import "../button/_variables.scss";
+// @import "../utils/_index.scss";
 @import "../combobox/_index.scss";
 @import "../toolbar/_index.scss";
 @import "../dialog/_index.scss";

diff --git a/packages/bootstrap/scss/pdf-viewer/_variables.scss b/packages/bootstrap/scss/pdf-viewer/_variables.scss
@@ -1,4 +1,5 @@
 // PDF viewer
+
 $pdf-viewer-border-width: 1px !default;
 $pdf-viewer-font-family: $font-family !default;
 $pdf-viewer-font-size: $font-size !default;