@progress/kendo-theme-fluent 6.2.1-dev.0 → 6.2.1-dev.151

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "6.2.1-dev.0+7a0fad806",
+    "version": "6.2.1-dev.151+d6d7eb1c2",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "6.2.1-dev.0+7a0fad806",
+    "version": "6.2.1-dev.151+d6d7eb1c2",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "6.2.1-dev.0+7a0fad806",
+  "version": "6.2.1-dev.151+d6d7eb1c2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -49,9 +49,9 @@
     "postpublish": "echo 'no postpublish for the Fluent theme'"
   },
   "dependencies": {
-    "@progress/kendo-font-icons": "1.4.0",
-    "@progress/kendo-theme-core": "6.2.1-dev.0+7a0fad806",
-    "@progress/kendo-theme-utils": "6.2.1-dev.0+7a0fad806"
+    "@progress/kendo-font-icons": "1.4.2",
+    "@progress/kendo-theme-core": "6.2.1-dev.151+d6d7eb1c2",
+    "@progress/kendo-theme-utils": "6.2.1-dev.151+d6d7eb1c2"
   },
-  "gitHead": "7a0fad8063cd9fe27e17a9898e289cca17895c32"
+  "gitHead": "d6d7eb1c2046ac5f9c3bfe3b423b037cbaa7fa23"
 }

package/scss/button/_variables.scss

@@ -2,55 +2,73 @@
 @use "sass:map";
 @use "../core/" as *;
 
-/// Width of the border around the button.
+/// The width of the border around the Button.
 /// @group button
 $kendo-button-border-width: 1px !default;
 
-/// Horizontal padding of the button.
+/// The horizontal padding of the small Button.
 /// @group button
 $kendo-button-sm-padding-x: map.get( $kendo-spacing, 5 ) !default;
+/// The horizontal padding of the medium Button.
+/// @group button
 $kendo-button-md-padding-x: map.get( $kendo-spacing, 5 ) !default;
+/// The horizontal padding of the large Button.
+/// @group button
 $kendo-button-lg-padding-x: map.get( $kendo-spacing, 5 ) !default;
 
-/// Vertical padding of the button.
+/// The vertical padding of the small Button.
 /// @group button
 $kendo-button-sm-padding-y: map.get( $kendo-spacing, 1 ) !default;
+/// The vertical padding of the medium Button.
+/// @group button
 $kendo-button-md-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
+/// The vertical padding of the large Button.
+/// @group button
 $kendo-button-lg-padding-y: map.get( $kendo-spacing, 2 ) !default;
 
-/// Font sizes of the button.
+/// The font size of the small Button.
 /// @group button
 $kendo-button-sm-font-size: var( --kendo-font-size, inherit ) !default;
+/// The font size of the medium Button.
+/// @group button
 $kendo-button-md-font-size: var( --kendo-font-size, inherit ) !default;
+/// The font size of the large Button.
+/// @group button
 $kendo-button-lg-font-size: var( --kendo-font-size, inherit ) !default;
 
-/// Line heights used along with $kendo-font-size.
+/// The line height used along with the $kendo-font-size of the small Button.
 /// @group button
 $kendo-button-sm-line-height: var( --kendo-line-height, normal ) !default;
+/// The line height used along with the $kendo-font-size of the medium Button.
+/// @group button
 $kendo-button-md-line-height: var( --kendo-line-height, normal ) !default;
+/// The line height used along with the $kendo-font-size of the large Button.
+/// @group button
 $kendo-button-lg-line-height: var( --kendo-line-height, normal ) !default;
 
-// Font family of the button.
+/// The font family of the Button.
+/// @group button
 $kendo-button-font-family: var( --kendo-font-family, inherit ) !default;
 
-// Font weight of the button.
+/// The font weight of the Button.
+/// @group button
 $kendo-button-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 
-/// Calculated height of the button.
+/// The calculated height of the Button.
 /// @group button
 $kendo-button-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
 $kendo-button-sm-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
 $kendo-button-md-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
 $kendo-button-lg-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
 
-/// Calculated inner height of the button. Without the border width.
+/// The calculated inner height of the Button excluding the border width.
 /// @group button
 $kendo-button-inner-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) ) !default;
 $kendo-button-sm-inner-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) ) !default;
 $kendo-button-md-inner-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) ) !default;
 $kendo-button-lg-inner-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) ) !default;
 
-/// Sizes map for the button.
+/// The sizes map for the Button.
 /// @group button
 $kendo-button-sizes: (
     sm: (
@@ -73,35 +91,35 @@ $kendo-button-sizes: (
     )
 ) !default;
 
-/// Content spacing of the button.
+/// The content spacing of the Button.
 /// @group button
 $kendo-button-spacing: map.get( $kendo-spacing, 2 ) !default;
 
-/// Offset of the focused button.
+/// The offset of the focused Button.
 /// @group button
 $kendo-button-focus-offset: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
-/// Outline width of the focused button.
+/// The Outline width of the focused Button.
 /// @group button
 $kendo-button-focus-outline-width: 1px !default;
-/// Outline style of the focused button.
+/// The outline style of the focused Button.
 /// @group button
 $kendo-button-focus-outline-style: solid !default;
 
-/// Offset of the flat focused button.
+/// The offset of the flat focused Button.
 /// @group button
 $kendo-button-flat-focus-offset: 1px !default;
-/// Outline width of the flat focused button.
+/// The outline width of the flat focused Button.
 /// @group button
 $kendo-button-flat-focus-outline-width: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 
-/// Offset of the link focused button.
+/// The offset of the link focused Button.
 /// @group button
 $kendo-button-link-focus-offset: 0 !default;
-/// Outline width of the flat focused button.
+/// The outline width of the flat focused Button.
 /// @group button
 $kendo-button-link-focus-outline-width: 1px !default;
 
-// Theme variations for the button.
+// The theme variations for the Button.
 
 $kendo-button-brand-colors: (
     primary: primary,
@@ -115,7 +133,7 @@ $kendo-button-brand-colors: (
 
 // Matrices with theme colors in the order: bg, color, border, outline
 
-// Color matrix for the base button
+// The color matrix for the base Button
 $_tc-base-matrix: (
     solid: (
         normal: ($kendo-color-white, 160, 110),
@@ -155,7 +173,7 @@ $_tc-base-matrix: (
     )
 ) !default;
 
-// Color matrix for primary, error, success, info, secondary, tertiary buttons
+// The color matrix for primary, error, success, info, secondary, tertiary Buttons
 $_tc-brand-matrix: (
     solid: (
         normal: (100, $kendo-color-white, 100),
@@ -204,7 +222,7 @@ $_tc-brand-matrix: (
     )
 ) !default;
 
-// Color matrix for warning buttons
+// The color matrix for warning Buttons
 $_tc-warning-matrix: (
     solid: (
         normal: (100, get-theme-color-var( neutral-160 ), 100),
@@ -253,7 +271,7 @@ $_tc-warning-matrix: (
     )
 ) !default;
 
-// Color matrix for dark buttons
+// The color matrix for dark Buttons
 $_tc-dark-matrix: (
     solid: (
         normal: (160, $kendo-color-white, 160),
@@ -302,7 +320,7 @@ $_tc-dark-matrix: (
     )
 ) !default;
 
-// Color matrix for light buttons
+// The color matrix for light Buttons
 $_tc-light-matrix: (
     solid: (
         normal: (50, 160, 50),
@@ -351,10 +369,11 @@ $_tc-light-matrix: (
     )
 ) !default;
 
-/// Theme colors map for the button.
+/// The theme colors map for the Button.
+/// @group button
 $kendo-button-theme-colors: () !default;
 
-// Map for base theme color
+// The map for the base theme color
 @each $fill-mode, $ui-states in $_tc-base-matrix {
     $kendo-button-theme-colors: map.deep-merge(
         $kendo-button-theme-colors,
@@ -362,7 +381,7 @@ $kendo-button-theme-colors: () !default;
     );
 }
 
-// Map for brand theme colors
+// The map for the brand theme colors
 @each $fill-mode, $ui-states in $_tc-brand-matrix {
     @each $brand-color, $palette in $kendo-button-brand-colors {
         $kendo-button-theme-colors: map.deep-merge(
@@ -372,7 +391,7 @@ $kendo-button-theme-colors: () !default;
     }
 }
 
-// Map for warning theme colors
+// The map for the warning theme colors
 @each $fill-mode, $ui-states in $_tc-warning-matrix {
     $kendo-button-theme-colors: map.deep-merge(
         $kendo-button-theme-colors,
@@ -380,7 +399,7 @@ $kendo-button-theme-colors: () !default;
     );
 }
 
-// Map for dark theme colors
+// The map for the dark theme colors
 @each $fill-mode, $ui-states in $_tc-dark-matrix {
     $kendo-button-theme-colors: map.deep-merge(
         $kendo-button-theme-colors,
@@ -388,7 +407,7 @@ $kendo-button-theme-colors: () !default;
     );
 }
 
-// Map for light theme colors
+// The map for the light theme colors
 @each $fill-mode, $ui-states in $_tc-light-matrix {
     $kendo-button-theme-colors: map.deep-merge(
         $kendo-button-theme-colors,

package/scss/calendar/_layout.scss

@@ -519,6 +519,8 @@
 
     // RTL
     .k-rtl .k-calendar,
+    [dir="rtl"] .k-calendar,
+    .k-calendar.k-rtl,
     .k-calendar[dir="rtl"] {
 
         .k-calendar-nav-prev,

package/scss/checkbox/_variables.scss

@@ -4,15 +4,15 @@
 
 // Checkbox
 
-/// Border radius of radio button.
+/// The border radius of the CheckBox.
 /// @group checkbox
 $kendo-checkbox-border-radius: null !default;
 
-/// Border width of checkbox.
+/// The border width of the CheckBox.
 /// @group checkbox
 $kendo-checkbox-border-width: 1px !default;
 
-// Checkbox sizes
+// A map with the different CheckBox sizes.
 $kendo-checkbox-sizes: (
     sm: (
         size: map.get( $kendo-spacing, 4 ),
@@ -37,182 +37,182 @@ $kendo-checkbox-sizes: (
     )
 ) !default;
 
-/// Background color of checkbox.
+/// The background color of the CheckBox.
 /// @group checkbox
 $kendo-checkbox-bg: $kendo-component-bg !default;
-/// Color of checkbox.
+/// The text color of the CheckBox.
 /// @group checkbox
 $kendo-checkbox-text: transparent !default;
-/// Border color of checkbox.
+/// The border color of the CheckBox.
 /// @group checkbox
 $kendo-checkbox-border: get-theme-color-var( neutral-160 ) !default;
 
-/// Background color of hovered checkbox.
+/// The background color of the hovered CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-bg: $kendo-checkbox-bg !default;
-/// Color of hovered checkbox.
+/// The text color of the hovered CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-text: get-theme-color( neutral, 130 ) !default;
-/// Border color of hovered checkbox.
+/// The border color of the hovered CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-border: $kendo-checkbox-border !default;
 
-/// Background color of checked checkbox.
+/// The background color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-bg: get-theme-color-var( primary-100 ) !default;
-/// Color of checked checkbox.
+/// The text color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-text: $kendo-color-white !default;
-/// Border color of checked checkbox.
+/// The border color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
 
-/// Background of hovered and checked checkbox.
+/// The background of the hovered and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-checked-bg: get-theme-color-var( primary-110 ) !default;
-/// Color of checked checkbox.
+/// The text color of the hovered and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-checked-text: $kendo-color-white !default;
-/// Border of hovered and checked checkbox.
+/// The border color of the hovered and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-checked-border: $kendo-checkbox-hover-checked-bg !default;
 
-/// Border color of focused checkbox.
+/// The border color of the focused CheckBox.
 /// @group checkbox
 $kendo-checkbox-focus-border: null !default;
-/// Box shadow of focused checkbox.
+/// The box shadow of the focused CheckBox.
 /// @group checkbox
 $kendo-checkbox-focus-shadow: null !default;
-/// The outline of a focused checkbox.
+/// The outline of the focused CheckBox.
 /// @group checkbox
 $kendo-checkbox-focus-outline: 1px solid get-theme-color-var( neutral-130 ) !default;
 $kendo-checkbox-focus-outline-offset: 2px !default;
 
-/// Background color of indeterminate checkbox.
+/// The background color of the indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-indeterminate-bg: $kendo-checkbox-bg !default;
-/// Color of indeterminate checkbox.
+/// The text color of the indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-indeterminate-text: get-theme-color( primary, 100 ) !default;
-/// Border color of indeterminate checkbox.
+/// The border color of the indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-indeterminate-border: get-theme-color-var( primary-100 ) !default;
 
-/// Background color of hovered and indeterminate checkbox.
+/// The background color of the hovered and indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-indeterminate-bg: $kendo-checkbox-bg !default;
-/// Background color of hovered and indeterminate checkbox.
+/// The text color of the hovered and indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-indeterminate-text: get-theme-color( primary, 110 ) !default;
-/// Border color of hovered and indeterminate checkbox.
+/// The border color of the hovered and indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-indeterminate-border: get-theme-color-var( primary-110 ) !default;
 
-/// Background color of disabled checkbox.
+/// The background color of the disabled CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-bg: $kendo-checkbox-bg !default;
-/// Color of disabled checkbox.
+/// The text color of the disabled CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-text: get-theme-color-var( neutral-60 ) !default;
-/// Border color of disabled checkbox.
+/// The border color of the disabled CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-border: get-theme-color-var( neutral-60 ) !default;
 
-/// Background color of disabled and checked checkbox.
+/// The background color of the disabled and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-bg: get-theme-color-var( neutral-60 ) !default;
-/// Color of disabled and checked checkbox.
+/// The text color of the disabled and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-text: $kendo-color-white !default;
-/// Border color of disabled and checked checkbox.
+/// The border color of the disabled and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-border: get-theme-color-var( neutral-60 ) !default;
 
-/// Background color of disabled and indeterminate checkbox.
+/// The background color of the disabled and indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-indeterminate-bg: $kendo-checkbox-bg !default;
-/// Border color of disabled and indeterminate checkbox.
+/// The border color of the disabled and indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-indeterminate-text: get-theme-color( neutral, 60 ) !default;
-/// Border color of disabled and indeterminate checkbox.
+/// The border color of the disabled and indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-indeterminate-border: get-theme-color-var( neutral-60 ) !default;
 
-/// Background color of invalid checkbox.
+/// The background color of an invalid CheckBox.
 /// @group checkbox
 $kendo-checkbox-invalid-bg: $kendo-checkbox-bg !default;
-/// Color of invalid checkbox.
+/// The text color of an invalid CheckBox.
 /// @group checkbox
 $kendo-checkbox-invalid-text: $kendo-invalid-text !default;
-/// Border color of invalid checkbox.
+/// The border color of an invalid CheckBox.
 /// @group checkbox
 $kendo-checkbox-invalid-border: $kendo-invalid-border !default;
 
 
 // Checkbox indicator
 
-/// Type of checkbox indicator.
+/// The type of the CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-indicator-type: image !default;
 
-/// Glyph font family of checkbox indicator.
+/// The font family of the CheckBox indicator glyph.
 /// @group checkbox
 $kendo-checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
-/// Glyph of checkbox indicator.
+/// The glyph of the CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-checked-glyph: "\e118" !default;
-/// Glyph of indeterminate checkbox indicator.
+/// The glyph of the indeterminate CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-indeterminate-glyph: "\e121" !default;
 
-/// Image of hovered checkbox indicator.
+/// The image of the hovered CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-hover-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-hover-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
-/// Image of checked checkbox indicator.
+/// The image of the checked CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
-/// Image of indeterminate checkbox indicator.
+/// The image of the indeterminate CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#{$kendo-checkbox-indeterminate-text}'/></svg>") ) !default;
-/// Image of hovered and checked checkbox indicator.
+/// The image of the hovered and checked CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-hover-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-hover-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
-/// Image of hovered and indeterminate checkbox indicator.
+/// The image of the hovered and indeterminate CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-hover-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#{$kendo-checkbox-hover-indeterminate-text}'/></svg>") ) !default;
-/// Image of checked checkbox indicator.
+/// The image of the checked CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-disabled-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
-/// Image of indeterminate checkbox indicator.
+/// The image of the indeterminate CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-disabled-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#{$kendo-checkbox-disabled-indeterminate-text}'/></svg>") ) !default;
 
 
 // Checkbox label
 
-/// The horizontal margin of the checkbox inside a label.
+/// The horizontal margin of the CheckBox inside a label.
 /// @group checkbox
 $kendo-checkbox-label-margin-x: map.get( $kendo-spacing, 2 ) !default;
 
 
 // Checkbox list
 
-/// Spacing between items of horizontal checkbox list.
+/// The spacing between the items in a horizontal CheckBox list.
 /// @group checkbox
 $kendo-checkbox-list-spacing: map.get( $kendo-spacing, 4 ) !default;
-/// Horizontal padding of checkbox list items.
+/// The horizontal padding of the CheckBox list items.
 /// @group checkbox
 $kendo-checkbox-list-item-padding-x: 0px !default;
-/// Vertical padding of checkbox list items.
+/// The vertical padding of the CheckBox list items.
 /// @group checkbox
 $kendo-checkbox-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 
 
 // Checkbox ripple
 
-/// Background color of checkbox ripple.
+/// The background color of the CheckBox' ripple.
 /// @group checkbox
 $kendo-checkbox-ripple-bg: get-theme-color-var( primary-100 ) !default;
-/// Opacity of checkbox ripple.
+/// The opacity of the CheckBox' ripple.
 /// @group checkbox
 $kendo-checkbox-ripple-opacity: .25 !default;