@progress/kendo-theme-default 6.1.1-dev.4 → 6.1.1-dev.53

package/dist/meta/variables.scss

@@ -0,0 +1,10 @@
+@use "sass:meta";
+@use "../all.scss";
+
+$_vars: meta.module-variables("all");
+
+body {
+    @each $key, $val in $_vars {
+        var: k-resolve-var( unquote($key), meta.type-of( $val ), $val );
+    }
+}

package/lib/swatches/default-blue.json

@@ -3,7 +3,7 @@
     "name": "Default Blue",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.1.1-dev.4",
+    "version": "6.1.1-dev.53+36ac80531",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Default Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.1.1-dev.4",
+    "version": "6.1.1-dev.53+36ac80531",
     "api": "legacy",
     "previewColors": [
         "#ff6358",

package/lib/swatches/default-green.json

@@ -3,7 +3,7 @@
     "name": "Default Green",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.1.1-dev.4",
+    "version": "6.1.1-dev.53+36ac80531",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Default Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.1.1-dev.4",
+    "version": "6.1.1-dev.53+36ac80531",
     "api": "legacy",
     "previewColors": [
         "#000000",

package/lib/swatches/default-main.json

@@ -3,7 +3,7 @@
     "name": "Default Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.1.1-dev.4",
+    "version": "6.1.1-dev.53+36ac80531",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-nordic.json

@@ -3,7 +3,7 @@
     "name": "Default Nordic",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.1.1-dev.4",
+    "version": "6.1.1-dev.53+36ac80531",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-ocean-blue-a11y.json

@@ -3,7 +3,7 @@
     "name": "Default Ocean Blue A11Y",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.1.1-dev.4",
+    "version": "6.1.1-dev.53+36ac80531",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-ocean-blue.json

@@ -3,7 +3,7 @@
     "name": "Default Ocean Blue",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.1.1-dev.4",
+    "version": "6.1.1-dev.53+36ac80531",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-orange.json

@@ -3,7 +3,7 @@
     "name": "Default Orange",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.1.1-dev.4",
+    "version": "6.1.1-dev.53+36ac80531",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-purple.json

@@ -3,7 +3,7 @@
     "name": "Default Purple",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.1.1-dev.4",
+    "version": "6.1.1-dev.53+36ac80531",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-turquoise.json

@@ -3,7 +3,7 @@
     "name": "Default Turquoise",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.1.1-dev.4",
+    "version": "6.1.1-dev.53+36ac80531",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-urban.json

@@ -3,7 +3,7 @@
     "name": "Default Urban",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.1.1-dev.4",
+    "version": "6.1.1-dev.53+36ac80531",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "6.1.1-dev.4",
+  "version": "6.1.1-dev.53+36ac80531",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -48,8 +48,8 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "1.4.0",
-    "@progress/kendo-theme-core": "^6.1.1-dev.4",
-    "@progress/kendo-theme-utils": "^6.1.1-dev.4"
+    "@progress/kendo-theme-core": "6.1.1-dev.53+36ac80531",
+    "@progress/kendo-theme-utils": "6.1.1-dev.53+36ac80531"
   },
-  "gitHead": "7ebd1ea8443604e84851d505d81be33088fa0057"
+  "gitHead": "36ac80531f631f59ceb617dcb11f3b0df360d953"
 }

package/scss/_variables.scss

@@ -55,34 +55,70 @@ $kendo-spacing: (
 ) !default;
 
 
-// Icons
+/// Icon size.
+/// @group common
 $kendo-icon-size: 16px !default;
-
+/// xtra small icon size.
+/// @group common
 $kendo-icon-size-xs: calc( #{$kendo-icon-size} * .75 ) !default;
+/// Small icon size.
+/// @group common
 $kendo-icon-size-sm: calc( #{$kendo-icon-size} * .875 ) !default;
+/// Medium icon size.
+/// @group common
 $kendo-icon-size-md: $kendo-icon-size !default;
+/// Large icon size.
+/// @group common
 $kendo-icon-size-lg: calc( #{$kendo-icon-size} * 1.25 ) !default;
+/// Extra large icon size.
+/// @group common
 $kendo-icon-size-xl: calc( #{$kendo-icon-size} * 1.5 ) !default;
+/// Double extra large icon size.
+/// @group common
 $kendo-icon-size-xxl: calc( #{$kendo-icon-size} * 2 ) !default;
+/// Triple extra large icon size.
+/// @group common
 $kendo-icon-size-xxxl: calc( #{$kendo-icon-size} * 3 ) !default;
 
 $kendo-icon-spacing: k-map-get( $kendo-spacing, 1 ) !default;
 $kendo-icon-padding: k-map-get( $kendo-spacing, 1 ) !default;
 
-// Metrics
+/// Horizontal padding.
+/// @group common
 $kendo-padding-x: 8px !default;
+/// Vertical padding.
+/// @group common
 $kendo-padding-y: 4px !default;
+/// Small horizontal padding.
+/// @group common
 $kendo-padding-sm-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// Small vertical padding.
+/// @group common
 $kendo-padding-sm-y: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+/// Medium horizontal padding.
+/// @group common
 $kendo-padding-md-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// Medium vertical padding.
+/// @group common
 $kendo-padding-md-y: k-map-get( $kendo-spacing, 1 ) !default;
+/// Large horizontal padding.
+/// @group common
 $kendo-padding-lg-x: k-map-get( $kendo-spacing, 3 ) !default;
+/// Large vertical padding.
+/// @group common
 $kendo-padding-lg-y: k-map-get( $kendo-spacing, 1.5 ) !default;
 
 /// Border radius for all components.
+/// @group common
 $kendo-border-radius: k-map-get( $kendo-spacing, 1 ) !default;
+/// Small border radius.
+/// @group common
 $kendo-border-radius-sm: $kendo-border-radius - k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+/// Medium border radius.
+/// @group common
 $kendo-border-radius-md: $kendo-border-radius !default;
+/// Large border radius.
+/// @group common
 $kendo-border-radius-lg: $kendo-border-radius + k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 
 $kendo-border-radii: (
@@ -206,10 +242,20 @@ $kendo-theme-colors: (
 /// Base font size across all components.
 /// @group typography
 $kendo-font-size: 14px !default;
+/// Extra small font size across all components.
+/// @group typography
 $kendo-font-size-xs: 10px !default;
+/// Small font size across all components.
+/// @group typography
 $kendo-font-size-sm: 12px !default;
+/// Medium font size across all components.
+/// @group typography
 $kendo-font-size-md: $kendo-font-size !default;
+/// Large font size across all components.
+/// @group typography
 $kendo-font-size-lg: 16px !default;
+/// Extra large font size across all components.
+/// @group typography
 $kendo-font-size-xl: 20px !default;
 
 $kendo-font-sizes: (
@@ -235,29 +281,52 @@ $kendo-font-family: inherit !default;
 /// Line height used along with $kendo-font-size.
 /// @group typography
 $kendo-line-height: k-math-div( 20, 14 ) !default;
+/// Extra small line height used along with $kendo-font-size-xs.
+/// @group typography
 $kendo-line-height-xs: 1 !default;
+/// Small line height used along with $kendo-font-size-sm.
+/// @group typography
 $kendo-line-height-sm: 1.25 !default;
+/// Medium line height used along with $kendo-font-size-md.
+/// @group typography
 $kendo-line-height-md: $kendo-line-height !default;
+/// Large line height used along with $kendo-font-size-lg.
+/// @group typography
 $kendo-line-height-lg: 1.5 !default;
 $kendo-line-height-em: calc( #{$kendo-line-height} * 1em ) !default;
 
-// Font weight
+/// Light font weight.
+/// @group typography
 $kendo-font-weight-light: 300 !default;
+/// Normal font weight.
+/// @group typography
 $kendo-font-weight-normal: 400 !default;
+/// Medium font weight.
+/// @group typography
 $kendo-font-weight-medium: 500 !default;
+/// Semibold font weight.
+/// @group typography
 $kendo-font-weight-semibold: 600 !default;
+/// Bold font weight.
+/// @group typography
 $kendo-font-weight-bold: 700 !default;
 
-// Letter Spacing
+/// Letter spacing.
+/// @group typography
 $kendo-letter-spacing: null !default;
 
 
 // Generic styles
 
-// Root styles
+/// Background color of the body.
+/// @group common
 $kendo-body-bg: $kendo-color-white !default;
+/// Text color of the body.
+/// @group common
 $kendo-body-text: #424242 !default;
 
+/// Subtle text color.
+/// @group common
 $kendo-subtle-text: #666666 !default;
 
 $kendo-app-bg: k-try-shade( $kendo-body-bg, .25 ) !default;
@@ -265,7 +334,11 @@ $kendo-app-text: $kendo-body-text !default;
 $kendo-app-border: rgba( $kendo-color-black, .08 ) !default;
 
 // Link
+/// Text color of the links.
+/// @group common
 $kendo-link-text: $kendo-color-primary !default;
+/// Text color of the links on hover.
+/// @group common
 $kendo-link-hover-text: $kendo-color-primary-darker !default;
 
 
@@ -313,20 +386,28 @@ $kendo-selected-border: $kendo-base-border !default;
 /// The gradient background of selected items.
 $kendo-selected-gradient: $kendo-base-gradient !default;
 
+/// The background of selected and hovered items.
 $kendo-selected-hover-bg: k-try-shade( $kendo-selected-bg, .5 ) !default;
+/// The text color of selected and hovered items.
 $kendo-selected-hover-text: $kendo-selected-text !default;
+/// The border of selected and hovered items.
 $kendo-selected-hover-border: $kendo-base-border !default;
+/// The gradient of selected and hovered items.
 $kendo-selected-hover-gradient: $kendo-base-gradient !default;
 
 // TODO: refactor
+/// Box shadow of focused items.
 $kendo-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
 
+/// Transition used across all components.
 $kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default;
 
 
-// Disabled mixin variables
+/// Text color of disabled items.
 $kendo-disabled-text: #8f8f8f !default;
+/// Filter used for disabled items.
 $kendo-disabled-filter: grayscale(.1) !default;
+/// Opacity used for disabled items.
 $kendo-disabled-opacity: .6 !default;
 
 $kendo-disabled-styling: (
@@ -337,18 +418,29 @@ $kendo-disabled-styling: (
 
 // Generic styles
 
-// TODO: refactor once we extract drag drop as separate module
-
-
-// Header
+/// Background color of the component header.
+/// @group component
 $kendo-component-header-bg: $kendo-base-bg !default;
+/// Text color of the component header.
+/// @group component
 $kendo-component-header-text: $kendo-base-text !default;
+/// Border color of the component header.
+/// @group component
 $kendo-component-header-border: $kendo-base-border !default;
+/// Gradient of the component header.
+/// @group component
 $kendo-component-header-gradient: null !default;
 
 
-// Validator
+/// Background color of the invalid items.
+/// @group component
 $kendo-invalid-bg: null !default;
+/// Text color of the invalid items.
+/// @group component
 $kendo-invalid-text: $kendo-color-error !default;
+/// Border color of the invalid items.
+/// @group component
 $kendo-invalid-border: $kendo-color-error !default;
+/// Shadow of the invalid items.
+/// @group component
 $kendo-invalid-shadow: null !default;

package/scss/action-buttons/_layout.scss

@@ -1,7 +1,8 @@
 @include exports("action-buttons/layout") {
 
     .k-actions {
-        padding: $kendo-actions-padding-y $kendo-actions-padding-x;
+        padding-block: $kendo-actions-padding-y;
+        padding-inline: $kendo-actions-padding-x;
         box-sizing: border-box;
         border-width: $kendo-actions-border-width 0 0 0;
         border-style: solid;
@@ -33,7 +34,7 @@
     .k-edit-buttons,
     .k-action-buttons,
     .k-columnmenu-actions {
-        @extend .k-actions;
+        @extend .k-actions !optional;
     }
 
     // Actions align

package/scss/action-sheet/_layout.scss

@@ -82,7 +82,8 @@
 
     // Actionsheet titlebar
     .k-actionsheet-titlebar {
-        padding: $kendo-actionsheet-titlebar-padding-y $kendo-actionsheet-titlebar-padding-x;
+        padding-block: $kendo-actionsheet-titlebar-padding-y;
+        padding-inline: $kendo-actionsheet-titlebar-padding-x;
         border-width: 0;
         border-bottom-width: if( $kendo-actionsheet-titlebar-border-width, $kendo-actionsheet-titlebar-border-width, null );
         border-style: solid;
@@ -147,7 +148,8 @@
     }
     .k-actionsheet-action {
         margin: 0;
-        padding: $kendo-actionsheet-item-padding-y $kendo-actionsheet-item-padding-x;
+        padding-block: $kendo-actionsheet-item-padding-y;
+        padding-inline: $kendo-actionsheet-item-padding-x;
         min-height: $kendo-actionsheet-item-min-height;
         box-sizing: border-box;
         color: inherit;
@@ -242,16 +244,19 @@
         flex-flow: column nowrap;
 
         .k-actionsheet-titlebar {
-            padding: $kendo-adaptive-actionsheet-titlebar-padding-y $kendo-adaptive-actionsheet-titlebar-padding-x;
+            padding-block: $kendo-adaptive-actionsheet-titlebar-padding-y;
+            padding-inline: $kendo-adaptive-actionsheet-titlebar-padding-x;
             border-bottom-width: $kendo-adaptive-actionsheet-titlebar-border-width;
         }
 
         .k-actionsheet-content {
-            padding: $kendo-adaptive-actionsheet-content-padding-y $kendo-adaptive-actionsheet-content-padding-x;
+            padding-block: $kendo-adaptive-actionsheet-content-padding-y;
+            padding-inline: $kendo-adaptive-actionsheet-content-padding-x;
         }
 
         .k-actionsheet-footer {
-            padding: $kendo-adaptive-actionsheet-footer-padding-y $kendo-adaptive-actionsheet-footer-padding-x;
+            padding-block: $kendo-adaptive-actionsheet-footer-padding-y;
+            padding-inline: $kendo-adaptive-actionsheet-footer-padding-x;
         }
 
         .k-actionsheet-filter {

package/scss/adaptive/_layout.scss

@@ -134,7 +134,8 @@
 
             .k-recur-items-wrap {
                 width: 100%;
-                margin: -1px 0;
+                margin-block: -1px;
+                margin-inline: 0;
             }
 
             .k-scheduler-recur-end-wrap {
@@ -160,7 +161,8 @@
         }
 
         .k-scheduler-toolbar {
-            padding: $kendo-toolbar-md-padding-y $kendo-toolbar-md-padding-x;
+            padding-block: $kendo-toolbar-md-padding-y;
+            padding-inline: $kendo-toolbar-md-padding-x;
 
             > * {
                 margin: 0;
@@ -195,7 +197,8 @@
         }
 
         .k-scheduler-footer {
-            padding: $kendo-toolbar-md-padding-y $kendo-toolbar-md-padding-x;
+            padding-block: $kendo-toolbar-md-padding-y;
+            padding-inline: $kendo-toolbar-md-padding-x;
             display: flex;
             justify-content: space-between;
 
@@ -353,12 +356,14 @@
 
         .k-list-title,
         .k-filter-help-text {
-            padding: $kendo-listgroup-item-padding-y $kendo-listgroup-item-padding-x;
+            padding-block: $kendo-listgroup-item-padding-y;
+            padding-inline: $kendo-listgroup-item-padding-x;
             display: block;
         }
 
         .k-listgroup-title {
-            padding: $kendo-listgroup-item-padding-y $kendo-listgroup-item-padding-x;
+            padding-block: $kendo-listgroup-item-padding-y;
+            padding-inline: $kendo-listgroup-item-padding-x;
             font-weight: bold;
             text-transform: uppercase;
         }

package/scss/appbar/_layout.scss

@@ -2,8 +2,10 @@
 
     // Appbar
     .k-appbar {
-        margin: $kendo-appbar-margin-y $kendo-appbar-margin-x;
-        padding: $kendo-appbar-padding-y $kendo-appbar-padding-x;
+        margin-block: $kendo-appbar-margin-y;
+        margin-inline: $kendo-appbar-margin-x;
+        padding-block: $kendo-appbar-padding-y;
+        padding-inline: $kendo-appbar-padding-x;
         border-width: $kendo-appbar-border-width;
         border-style: solid;
         box-sizing: border-box;

package/scss/badge/_layout.scss

@@ -60,7 +60,8 @@
         $_min-width: k-map-get( $size-props, min-width );
 
         .k-badge-#{$size} {
-            padding: $_padding-y $_padding-x;
+            padding-block: $_padding-y;
+            padding-inline: $_padding-x;
             font-size: $_font-size;
             line-height: $_line-height;
             min-width: $_min-width;

package/scss/bottom-navigation/_layout.scss

@@ -2,7 +2,8 @@
 
     // Bottom Navigation
     .k-bottom-nav {
-        padding: $kendo-bottom-nav-padding-y $kendo-bottom-nav-padding-x;
+        padding-block: $kendo-bottom-nav-padding-y;
+        padding-inline: $kendo-bottom-nav-padding-x;
         width: 100%;
         border-width: 0;
         border-style: solid;
@@ -38,7 +39,8 @@
 
     // Items
     .k-bottom-nav-item {
-        padding: $kendo-bottom-nav-item-padding-y $kendo-bottom-nav-item-padding-x;
+        padding-block: $kendo-bottom-nav-item-padding-y;
+        padding-inline: $kendo-bottom-nav-item-padding-x;
         min-width: $kendo-bottom-nav-item-min-width;
         max-width: $kendo-bottom-nav-item-max-width;
         min-height: $kendo-bottom-nav-item-min-height;
@@ -68,8 +70,10 @@
         }
 
         > .k-bottom-nav-link {
-            margin: (-$kendo-bottom-nav-item-padding-y) (-$kendo-bottom-nav-item-padding-x);
-            padding: $kendo-bottom-nav-item-padding-y $kendo-bottom-nav-item-padding-x;
+            margin-block: (-$kendo-bottom-nav-item-padding-y);
+            margin-inline: (-$kendo-bottom-nav-item-padding-x);
+            padding-block: $kendo-bottom-nav-item-padding-y;
+            padding-inline: $kendo-bottom-nav-item-padding-x;
             width: 100%;
             color: inherit;
             display: flex;

package/scss/breadcrumb/_layout.scss

@@ -2,8 +2,10 @@
 
     // Breadcrumb
     .k-breadcrumb {
-        margin: $kendo-breadcrumb-margin-y $kendo-breadcrumb-margin-x;
-        padding: $kendo-breadcrumb-padding-y $kendo-breadcrumb-padding-x;
+        margin-block: $kendo-breadcrumb-margin-y;
+        margin-inline: $kendo-breadcrumb-margin-x;
+        padding-block: $kendo-breadcrumb-padding-y;
+        padding-inline: $kendo-breadcrumb-padding-x;
         border-width: $kendo-breadcrumb-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -67,7 +69,8 @@
     .k-breadcrumb-link,
     .k-breadcrumb-root-link {
         @include border-radius( $kendo-breadcrumb-link-border-radius );
-        padding: $kendo-breadcrumb-link-padding-y $kendo-breadcrumb-link-padding-x;
+        padding-block: $kendo-breadcrumb-link-padding-y;
+        padding-inline: $kendo-breadcrumb-link-padding-x;
         color: $kendo-breadcrumb-link-initial-text;
         text-decoration: none;
         white-space: nowrap;
@@ -91,7 +94,8 @@
     }
 
     .k-breadcrumb-icon-link {
-        padding: $kendo-breadcrumb-icon-link-padding-y $kendo-breadcrumb-icon-link-padding-x;
+        padding-block: $kendo-breadcrumb-icon-link-padding-y;
+        padding-inline: $kendo-breadcrumb-icon-link-padding-x;
     }
 
 

package/scss/button/_layout.scss

@@ -77,7 +77,8 @@
         $_line-height: k-map-get( $size-props, line-height );
 
         .k-button-#{$size} {
-            padding: $_padding-y $_padding-x;
+            padding-block: $_padding-y;
+            padding-inline: $_padding-x;
             font-size: $_font-size;
             line-height: $_line-height;
         }
@@ -283,7 +284,7 @@
     .k-button {
 
         &::before {
-            @extend .k-button-overlay;
+            @extend .k-button-overlay !optional;
         }
 
         // Hovered state

package/scss/button/_variables.scss

@@ -19,7 +19,7 @@ $kendo-button-sm-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 $kendo-button-md-padding-x: $kendo-button-padding-x !default;
 /// Horizontal padding of the large button.
 /// @group button
-$kendo-button-lg-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-button-lg-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 
 /// Vertical padding of the button.
 /// @group button