@progress/kendo-theme-fluent 7.0.3-dev.2 → 7.1.0-dev.0

package/scss/pdf-viewer/_variables.scss

@@ -3,99 +3,99 @@
 @use "../button/_variables.scss" as *;
 @use "../dropzone/_variables.scss" as *;
 
-/// Border width of the PDF viewer.
+/// The border width of the PDFViewer.
 /// @group pdf-viewer
 $kendo-pdf-viewer-border-width: 1px !default;
-/// Font family of the PDF viewer.
+/// The font family of the PDFViewer.
 /// @group pdf-viewer
 $kendo-pdf-viewer-font-family: var( --kendo-font-family, inherit ) !default;
-/// Font size of the PDF viewer.
+/// The font size of the PDFViewer.
 /// @group pdf-viewer
 $kendo-pdf-viewer-font-size: var( --kendo-font-size, inherit ) !default;
-/// Line height of the PDF viewer.
+/// The line height of the PDFViewer.
 /// @group pdf-viewer
 $kendo-pdf-viewer-line-height: var( --kendo-line-height, normal ) !default;
-/// Background color of the PDF viewer.
+/// The background color of the PDFViewer.
 /// @group pdf-viewer
 $kendo-pdf-viewer-bg: var( --kendo-component-bg, initial ) !default;
-/// Text color of the PDF viewer.
+/// The text color of the PDFViewer.
 /// @group pdf-viewer
 $kendo-pdf-viewer-text: var( --kendo-component-text, initial ) !default;
-/// Border color of the PDF viewer.
+/// The border color of the PDFViewer.
 /// @group pdf-viewer
 $kendo-pdf-viewer-border: var( --kendo-component-border, initial ) !default;
 
-/// Background color of the PDF viewer canvas.
+/// The background color of the PDFViewer canvas.
 /// @group pdf-viewer
 $kendo-pdf-viewer-canvas-bg: k-get-theme-color-var( neutral-10 ) !default;
-/// Text color of the PDF viewer canvas.
+/// The text color of the PDFViewer canvas.
 /// @group pdf-viewer
 $kendo-pdf-viewer-canvas-text: var( --kendo-component-text, inherit ) !default;
-/// Border color of the PDF viewer canvas.
+/// The border color of the PDFViewer canvas.
 /// @group pdf-viewer
 $kendo-pdf-viewer-canvas-border: var( --kendo-component-border, inherit ) !default;
 
-/// Spacing of the PDF viewer page.
+/// The spacing of the PDFViewer page.
 /// @group pdf-viewer
 $kendo-pdf-viewer-page-spacing: map.get( $kendo-spacing, 7.5 ) !default;
-/// Background color of the PDF viewer page.
+/// The background color of the PDFViewer page.
 /// @group pdf-viewer
 $kendo-pdf-viewer-page-bg: var( --kendo-component-bg, inherit ) !default;
-/// Text color of the PDF viewer page.
+/// The text color of the PDFViewer page.
 /// @group pdf-viewer
 $kendo-pdf-viewer-page-text: var( --kendo-component-text, inherit )!default;
-/// Border color of the PDF viewer page.
+/// The border color of the PDFViewer page.
 /// @group pdf-viewer
 $kendo-pdf-viewer-page-border: var( --kendo-component-border, inherit ) !default;
-/// Shadow of the PDF viewer page.
+/// The shadow of the PDFViewer page.
 /// @group pdf-viewer
 $kendo-pdf-viewer-page-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
 
-/// Horizontal padding of the PDF viewer search panel.
+/// The horizontal padding of the PDFViewer search panel.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-padding-x: map.get( $kendo-spacing, 3 ) !default;
-/// Vertical padding of the PDF viewer search panel.
+/// The vertical padding of the PDFViewer search panel.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-padding-y: $kendo-pdf-viewer-search-panel-padding-x !default;
-/// Spacing of the PDF viewer search panel.
+/// The spacing of the PDFViewer search panel.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-spacing: map.get( $kendo-spacing, 2 ) !default;
-/// Border width of the PDF viewer search panel.
+/// The border width of the PDFViewer search panel.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-border-width: 1px !default;
-/// Border radius of the PDF viewer search panel.
+/// 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;
-/// Background color of the PDF viewer search panel.
+/// The background color of the PDFViewer search panel.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-bg: var( --kendo-component-bg, inherit ) !default;
-/// Text color of the PDF viewer search panel.
+/// The text color of the PDFViewer search panel.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-text: var( --kendo-component-text, inherit ) !default;
-/// Border color of the PDF viewer search panel.
+/// The border color of the PDFViewer search panel.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-border: var( --kendo-component-border, inherit )!default;
-/// Shadow of the PDF viewer search panel.
+/// The shadow of the PDFViewer search panel.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-shadow: none !default;
-/// Spacing of the PDF viewer search panel matches container.
+/// The spacing of the matches container in the PDFViewer search panel.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-matches-spacing: var( --kendo-icon-spacing, .5rem ) !default;
-/// Vertical margin of the PDF viewer search panel.
+/// The vertical margin of the PDFViewer search panel.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-margin-y: calc( ( #{$kendo-button-calc-size} + ( 2 * #{$kendo-pdf-viewer-search-panel-border-width} ) + ( 2 * #{$kendo-pdf-viewer-search-panel-padding-y} ) ) * -1 ) !default;
 
-/// Line height of the PDF viewer selection.
+/// The line height of the PDFViewer selection.
 /// @group pdf-viewer
 $kendo-pdf-viewer-selection-line-height: var( --kendo-line-height-sm, normal ) !default;
 
-/// Background-color of the PDF viewer highlight.
+/// The background color of the PDFViewer highlight.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-highlight-bg: var( --kendo-component-text, inherit ) !default;
-/// Background-color of the PDF viewer highlight mark.
+/// The background color of the PDFViewer highlight mark.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-highlight-mark-bg: yellow !default;
 
-/// Text color of the PDF viewer icon.
+/// The text color of the PDFViewer icon.
 /// @group pdf-viewer
 $kendo-pdf-viewer-icon-text: $kendo-dropzone-icon-text !default;

package/scss/popup/_layout.scss

@@ -39,6 +39,7 @@
     .k-popup.k-popup-transparent {
         border-width: 0;
         background-color: transparent;
+        box-shadow: none;
     }
 
     // Flush popup

package/scss/rating/_variables.scss

@@ -1,47 +1,47 @@
 @use "sass:map";
 @use "../core/" as *;
 
-/// Font family of the rating.
+/// The font family of the Rating.
 /// @group rating
 $kendo-rating-font-family: var( --kendo-font-family, inherit ) !default;
-/// Font size of the rating.
+/// The font size of the Rating.
 /// @group rating
 $kendo-rating-font-size: var( --kendo-font-size-sm, inherit ) !default;
-/// Line height of the rating.
+/// The line height of the Rating.
 /// @group rating
 $kendo-rating-line-height: var( --kendo-line-height, normal ) !default;
 
-/// Content spacing of the rating.
+/// The content spacing of the Rating.
 /// @group rating
 $kendo-rating-spacing: map.get( $kendo-spacing, 1 ) !default;
 
-/// Horizontal padding of the rating item.
+/// The horizontal padding of the Rating item.
 /// @group rating
 $kendo-rating-item-padding-x: map.get( $kendo-spacing, 0.5 ) !default;
-/// Vertical padding of the rating item.
+/// The vertical padding of the Rating item.
 /// @group rating
 $kendo-rating-item-padding-y: map.get( $kendo-spacing, 2 ) !default;
-/// Normal color of the rating item.
+/// The text color of the Rating item.
 /// @group rating
 $kendo-rating-item-text: k-get-theme-color-var( neutral-130 ) !default;
-/// Hover color of the rating item.
+/// The text color of the hovered Rating item.
 /// @group rating
 $kendo-rating-item-hover-text: k-get-theme-color-var( primary-100 ) !default;
-/// Focus color of the rating item.
+/// The text color of the focused Rating item.
 /// @group rating
 $kendo-rating-item-focus-text: $kendo-rating-item-text !default;
-/// Outline width of the focused rating item.
+/// The outline width of the focused Rating item.
 /// @group rating
 $kendo-rating-item-focus-outline-width: 1px !default;
-/// Outline style of the focused rating item.
+/// The outline style of the focused Rating item.
 /// @group rating
 $kendo-rating-item-focus-outline-style: solid !default;
-/// Outline color of the focused rating item.
+/// The outline color of the focused Rating item.
 /// @group rating
 $kendo-rating-item-focus-outline: currentColor !default;
-/// Selected color of the rating item.
+/// The text color of the selected Rating item.
 /// @group rating
 $kendo-rating-item-selected-text: k-get-theme-color-var( neutral-160 ) !default;
-/// Selected hover color of the rating item.
+/// The text color of the selected and hovered Rating item.
 /// @group rating
 $kendo-rating-item-selected-hover-text: k-get-theme-color-var( primary-120 ) !default;

package/scss/skeleton/_variables.scss

@@ -1,22 +1,23 @@
 @use "../core/" as *;
 
-/// Text transform scale of the skeleton.
+/// The transform scale of the Skeleton text.
 /// @group skeleton
 $kendo-skeleton-text-transform: scale( 1, .6 ) !default;
-/// Border radius of the skeleton text.
+/// The border radius of the Skeleton text.
 /// @group skeleton
 $kendo-skeleton-text-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
 
-/// Border radius of the rectangle skeleton.
+/// The border radius of the rectangular Skeleton.
 /// @group skeleton
 $kendo-skeleton-rect-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
-/// Border radius of the circle skeleton.
+
+/// The border radius of the circular Skeleton.
 /// @group skeleton
 $kendo-skeleton-circle-border-radius: 9999px !default;
 
-/// Background color of the skeleton item.
+/// The background color of the Skeleton item.
 /// @group skeleton
 $kendo-skeleton-item-bg: k-get-theme-color-var( neutral-50 ) !default;
-/// Background color of the skeleton wave animation.
+/// The background color of the Skeleton wave animation.
 /// @group skeleton
 $kendo-skeleton-wave-bg: k-get-theme-color-var( neutral-20 ) !default;

package/scss/slider/_layout.scss

@@ -48,19 +48,6 @@
         }
     }
 
-
-    // Slider wrap
-    .k-slider-wrap {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-flow: inherit;
-        align-items: inherit;
-        gap: inherit;
-        position: relative;
-    }
-
-
     // Slider button
     .k-slider-button {
         flex: none;
@@ -365,13 +352,6 @@
     .k-slider kendo-resize-sensor {
         position: absolute;
     }
-    .k-slider-horizontal .k-slider-wrap:not(.k-slider-buttons) {
-        padding-inline: var( --kendo-slider-spacing, #{$kendo-slider-spacing} );
-    }
-    .k-slider-vertical .k-slider-wrap:not(.k-slider-buttons) {
-        padding-block: var( --kendo-slider-spacing, #{$kendo-slider-spacing} );
-    }
-
 
     // Aliases
     .k-slider .k-button { @extend .k-slider-button !optional; }

package/scss/tooltip/_theme.scss

@@ -3,11 +3,6 @@
 @use "./_variables.scss" as *;
 
 @mixin kendo-tooltip--theme() {
-
-    .k-tooltip-wrapper .k-tooltip {
-        @include box-shadow( var( --kendo-tooltip-shadow, #{$kendo-tooltip-shadow} ) );
-    }
-
     .k-tooltip {
         @include box-shadow( var( --kendo-tooltip-shadow, #{$kendo-tooltip-shadow} ) );
 

package/scss/tooltip/_variables.scss

@@ -1,71 +1,68 @@
 @use "sass:map";
 @use "../core/" as *;
 
-/// The radius of the border around the tooltip
+/// The border radius of the Tooltip.
 /// @group tooltip
 $kendo-tooltip-border-radius: $kendo-border-radius !default;
-/// The horizontal padding of the tooltip
+/// The horizontal padding of the Tooltip.
 /// @group tooltip
 $kendo-tooltip-padding-x: map.get( $kendo-spacing, 2 ) !default;
-/// The vertical padding of the tooltip
+/// The vertical padding of the Tooltip.
 /// @group tooltip
 $kendo-tooltip-padding-y: map.get( $kendo-spacing, 2 ) !default;
-/// The width of the border around the tooltip
+/// The width of the border around the Tooltip.
 /// @group tooltip
 $kendo-tooltip-border-width: 0px !default;
-/// The font family of the tooltip
+/// The font family of the Tooltip.
 /// @group tooltip
 $kendo-tooltip-font-family: var( --kendo-font-family, inherit ) !default;
-/// The font size of the tooltip
+/// The font size of the Tooltip.
 /// @group tooltip
 $kendo-tooltip-font-size: var( --kendo-font-size-sm, inherit ) !default;
-/// The line height of the tooltip
+/// The line height of the Tooltip.
 /// @group tooltip
 $kendo-tooltip-line-height: var( --kendo-line-height, normal ) !default;
 
-/// The font size of the tooltip title
+/// The font size of the Tooltip title.
 /// @group tooltip
 $kendo-tooltip-title-font-size: calc( #{$kendo-tooltip-font-size} * 1.25 ) !default;
-/// The line height of the tooltip title
+/// The line height of the Tooltip title.
 /// @group tooltip
 $kendo-tooltip-title-line-height: var( --kendo-line-heigh-xs, normal ) !default;
-/// The margin of the tooltip title
+/// The margin of the Tooltip title.
 /// @group tooltip
 $kendo-tooltip-title-margin: map.get( $kendo-spacing, 1 ) !default;
 
-/// The size of the tooltip callout
+/// The size of the Tooltip callout.
 /// @group tooltip
 $kendo-tooltip-callout-size: map.get( $kendo-spacing, 2 ) !default;
 
-/// The background of the tooltip
+/// The default background of the Tooltip.
 /// @group tooltip
 $kendo-tooltip-bg: $kendo-color-white !default;
-/// The text color of the tooltip
+/// The default text color of the Tooltip.
 /// @group tooltip
 $kendo-tooltip-text: var( --kendo-component-text, initial ) !default;
-/// The border color of the tooltip
+/// The default border color of the Tooltip.
 /// @group tooltip
 $kendo-tooltip-border: transparent !default;
-/// The box-shadow of the tooltip
+/// The box-shadow of the Tooltip.
 /// @group tooltip
 $kendo-tooltip-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 
-/// The text color of the tooltip button
+/// The text color of the Tooltip button.
 /// @group tooltip
 $kendo-tooltip-button-text: k-get-theme-color-var( neutral-130, initial ) !default;
 
-/// The primary background color of the tooltip
-/// @group tooltip
-$kendo-tooltip-primary-bg: k-get-theme-color-var( primary-100 ) !default;
-/// The primary text color of the tooltip
-/// @group tooltip
-$kendo-tooltip-primary-text: $kendo-color-white !default;
-/// The primary border color of the tooltip
-/// @group tooltip
-$kendo-tooltip-primary-border: initial !default;
-
 /// Theme variations for the tooltip.
-$kendo-tooltip-brand-colors: (error, warning, success, info ) !default;
+$kendo-tooltip-brand-colors: (
+    secondary: neutral,
+    tertiary: tertiary,
+    success: success,
+    warning: warning,
+    error: error,
+    info: info
+ ) !default;
 
 // Matrix with tooltip theme colors in the order: bg, color, border
 $_tc-tooltip-matrix: (
@@ -76,6 +73,14 @@ $_tc-tooltip-primary-matrix: (
     (normal: (100, $kendo-color-white, 100)),
 ) !default;
 
+$_tc-tooltip-dark-matrix: (
+    (normal: (160, $kendo-color-white, 160)),
+) !default;
+
+$_tc-tooltip-light-matrix: (
+    (normal: (50, 160, 50)),
+) !default;
+
 /// Theme colors map for the tooltip variations.
 $kendo-tooltip-theme-colors: () !default;
 
@@ -87,10 +92,24 @@ $kendo-tooltip-theme-colors: () !default;
 }
 
 @each $ui-states in $_tc-tooltip-matrix {
-    @each $brand-color in $kendo-tooltip-brand-colors {
+    @each $brand-color, $palette in $kendo-tooltip-brand-colors {
         $kendo-tooltip-theme-colors: map.deep-merge(
             $kendo-tooltip-theme-colors,
-            k-generate-theme-variation( $brand-color, $brand-color, $ui-states )
+            k-generate-theme-variation( $brand-color, $palette, $ui-states )
         );
     };
 }
+
+@each $ui-states in $_tc-tooltip-dark-matrix {
+    $kendo-tooltip-theme-colors: map.deep-merge(
+        $kendo-tooltip-theme-colors,
+        k-generate-theme-variation( dark, neutral, $ui-states )
+    );
+}
+
+@each $ui-states in $_tc-tooltip-light-matrix {
+    $kendo-tooltip-theme-colors: map.deep-merge(
+        $kendo-tooltip-theme-colors,
+        k-generate-theme-variation( light, neutral, $ui-states )
+    );
+}