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

package/scss/chip/_variables.scss

@@ -1,7 +1,5 @@
 @use "sass:map";
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
-@use "../core/color-system/" as *;
+@use "../core/" as *;
 
 // Chip
 
@@ -10,21 +8,21 @@
 $kendo-chip-border-width: 1px !default;
 /// The spacing between the text and the icons of the chip.
 /// @group chip
-$kendo-chip-spacing: map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-spacing: map.get( $kendo-spacing, 1 ) !default;
 
 /// The font family of the chip.
 /// @group chip
-$kendo-chip-font-family: var( --kendo-font-family, inherit );
+$kendo-chip-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// The chip avatar width.
 /// @group chip
-$kendo-chip-avatar-width: 1em;
+$kendo-chip-avatar-width: 1em !default;
 /// The chip avatar height.
 /// @group chip
-$kendo-chip-avatar-height: 1em;
+$kendo-chip-avatar-height: 1em !default;
 /// The chip avatar flex basis.
 /// @group chip
-$kendo-chip-avatar-flex-basis: 1em;
+$kendo-chip-avatar-flex-basis: 1em !default;
 /// The text color of disabled chip.
 /// @group chip
 $kendo-chip-disabled-text: var( --kendo-disabled-text, inherit ) !default;
@@ -43,25 +41,25 @@ $kendo-chip-outline-disabled-border: get-theme-color-var( neutral-90 ) !default;
 
 /// Offset of the outline focused chip.
 /// @group chip
-$kendo-chip-focus-offset: map-get( $kendo-spacing, thin ) !default;
+$kendo-chip-focus-offset: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 /// Outline width of the outline focused button.
 /// @group chip
-$kendo-chip-focus-outline-width: map-get( $kendo-spacing, hair) !default;
+$kendo-chip-focus-outline-width: 1px !default;
 /// Outline style of the outline focused button.
 /// @group chip
 $kendo-chip-focus-outline-style: solid !default;
 
 /// Horizontal padding of the chip.
 /// @group chip
-$kendo-chip-padding-x-sm: map-get( $kendo-spacing, 2 ) !default;
-$kendo-chip-padding-x-md: map-get( $kendo-spacing, 2 ) !default;
-$kendo-chip-padding-x-lg: map-get( $kendo-spacing, 2 ) !default;
+$kendo-chip-padding-x-sm: map.get( $kendo-spacing, 2 ) !default;
+$kendo-chip-padding-x-md: map.get( $kendo-spacing, 2 ) !default;
+$kendo-chip-padding-x-lg: map.get( $kendo-spacing, 2 ) !default;
 
 /// Vertical padding of the chip.
 /// @group chip
-$kendo-chip-padding-y-sm: ( map-get( $kendo-spacing, 1 ) - map-get( $kendo-spacing, thin ) ) !default;
-$kendo-chip-padding-y-md: ( map-get( $kendo-spacing, 1 ) ) !default;
-$kendo-chip-padding-y-lg: ( map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) ) !default;
+$kendo-chip-padding-y-sm: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-chip-padding-y-md: map.get( $kendo-spacing, 1 ) !default;
+$kendo-chip-padding-y-lg: map.get( $kendo-spacing, 1.5 ) !default;
 
 /// Font sizes of the chip.
 /// @group chip
@@ -75,6 +73,11 @@ $kendo-chip-line-height-sm: var( --kendo-line-height, normal ) !default;
 $kendo-chip-line-height-md: var( --kendo-line-height, normal ) !default;
 $kendo-chip-line-height-lg: var( --kendo-line-height, normal ) !default;
 
+/// Calculated height of the chip.
+/// @group chip
+$kendo-chip-calc-size: calc( #{$kendo-chip-line-height-md} * 1em + #{$kendo-chip-padding-y-md} * 2 + #{$kendo-chip-border-width} * 2 ) !default;
+$kendo-chip-calc-size-sm: calc( #{$kendo-chip-line-height-sm} * 1em + #{$kendo-chip-padding-y-sm} * 2 + #{$kendo-chip-border-width} * 2 ) !default;
+
 /// Sizes map for the chip.
 /// @group chip
 $kendo-chip-sizes: (
@@ -99,7 +102,7 @@ $kendo-chip-sizes: (
 ) !default;
 
 
-$kendo-chip-brand-colors: ( error, success, info );
+$kendo-chip-brand-colors: ( error, success, info ) !default;
 
 // Matrices with theme colors in the order: bg, color, border, outline
 
@@ -110,20 +113,20 @@ $_tc-base-matrix: (
         hover: (30, 190, 30),
         focus: (20, 160, 130),
         focus-hover: (20, 190, 130),
-        selected: (get-theme-color-var( primary-100 ), $white, get-theme-color-var( primary-100 )),
-        selected-hover: (get-theme-color-var( primary-100 ), $white, get-theme-color-var( primary-100 )),
+        selected: (get-theme-color-var( primary-100 ), $kendo-color-white, get-theme-color-var( primary-100 )),
+        selected-hover: (get-theme-color-var( primary-100 ), $kendo-color-white, get-theme-color-var( primary-100 )),
         disabled: (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit ))
     ),
     outline: (
         normal: (transparent, 160, currentColor),
-        hover: (190, $white, 190),
+        hover: (190, $kendo-color-white, 190),
         focus: (transparent, 160, currentColor, inherit),
-        focus-hover: (190, $white, 190, inherit),
-        selected: (190, $white, 190),
+        focus-hover: (190, $kendo-color-white, 190, inherit),
+        selected: (190, $kendo-color-white, 190),
         selected-hover: (20, 190, 110),
         disabled: (initial, var( --kendo-disabled-text, inherit ), 90)
     ),
-);
+) !default;
 
 // Color matrix for error, success, info chips
 $_tc-brand-matrix: (
@@ -138,14 +141,14 @@ $_tc-brand-matrix: (
     ),
     outline: (
         normal: (transparent, 160, currentColor),
-        hover: (190, $white, 190),
+        hover: (190, $kendo-color-white, 190),
         focus: (transparent, 160, 160, inherit),
-        focus-hover: (190, $white, 190, inherit),
-        selected: (190, $white, 190),
-        selected-hover: (190, $white, 190),
+        focus-hover: (190, $kendo-color-white, 190, inherit),
+        selected: (190, $kendo-color-white, 190),
+        selected-hover: (190, $kendo-color-white, 190),
         disabled: (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit ))
     )
-);
+) !default;
 
 // Color matrix for warning chips
 $_tc-warning-matrix: (
@@ -160,17 +163,17 @@ $_tc-warning-matrix: (
     ),
     outline: (
         normal: (transparent, 160, currentColor),
-        hover: (190, $white, 190),
+        hover: (190, $kendo-color-white, 190),
         focus: (transparent, 160, 160, inherit),
-        focus-hover: (190, $white, 190, inherit),
-        selected: (190, $white, 190),
-        selected-hover: (190, $white, 190),
+        focus-hover: (190, $kendo-color-white, 190, inherit),
+        selected: (190, $kendo-color-white, 190),
+        selected-hover: (190, $kendo-color-white, 190),
         disabled: (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit ))
     )
-);
+) !default;
 
 /// Theme colors map for the button.
-$kendo-chip-theme-colors: ();
+$kendo-chip-theme-colors: () !default;
 
 // Map for base theme color
 @each $fill-mode, $ui-states in $_tc-base-matrix {
@@ -204,7 +207,7 @@ $kendo-chip-theme-colors: ();
 /// The sizes of the chip list.
 /// @group chip
 $kendo-chip-list-sizes: (
-    sm: map-get( $kendo-spacing, 1 ),
-    md: map-get( $kendo-spacing, 1 ),
-    lg: map-get( $kendo-spacing, 1 )
+    sm: map.get( $kendo-spacing, 1 ),
+    md: map.get( $kendo-spacing, 1 ),
+    lg: map.get( $kendo-spacing, 1 )
 ) !default;

package/scss/chip/index.scss

@@ -9,12 +9,12 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
-@use "../core/module-system" as module;
+@use "../core/module-system/" as module;
 @include module.register( $_kendo-module-meta... );
 
 // Expose

package/scss/color-preview/_layout.scss

@@ -1,6 +1,5 @@
-@use "../core/_variables.scss" as *;
-@use "../icon/_variables.scss" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-color-preview--layout() {
 

package/scss/color-preview/_theme.scss

@@ -1,5 +1,5 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-color-preview--theme() {
 

package/scss/color-preview/_variables.scss

@@ -1,5 +1,4 @@
-@use "../core/color-system" as *;
-@use "../core/functions" as *;
+@use "../core/" as *;
 
 /// Border radius of the color preview.
 /// @group color-preview
@@ -22,7 +21,7 @@ $kendo-color-preview-hover-border: get-theme-color-var( neutral-60 ) !default;
 
 /// Background color of the color preview when no color is selected.
 /// @group color-preview
-$kendo-color-preview-no-color-bg: $white !default;
+$kendo-color-preview-no-color-bg: $kendo-color-white !default;
 /// Text color of the color preview when no color is selected.
 /// @group color-preview
 $kendo-color-preview-no-color-text: get-theme-color( error, 190 ) !default;

package/scss/color-preview/index.scss

@@ -8,9 +8,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/coloreditor/_layout.scss

@@ -1,6 +1,6 @@
-@use "../core/mixins" as *;
+@use "../core/" as *;
 @use "../colorpalette/_variables.scss" as *;
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-coloreditor--layout() {
 

package/scss/coloreditor/_theme.scss

@@ -1,5 +1,5 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-coloreditor--theme() {
 

package/scss/coloreditor/_variables.scss

@@ -1,10 +1,10 @@
+@use "sass:map";
 @use "sass:math";
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "../core/" as *;
 
 /// Spacer of the color editor.
 /// @group coloreditor
-$kendo-coloreditor-spacer: map-get( $kendo-spacing, 2 ) !default;
+$kendo-coloreditor-spacer: map.get( $kendo-spacing, 2 ) !default;
 
 /// Min width of the color editor.
 /// @group coloreditor
@@ -63,7 +63,7 @@ $kendo-coloreditor-color-preview-height: 14px !default;
 
 /// Spacing between the colors in the color editor preview.
 /// @group coloreditor
-$kendo-coloreditor-preview-spacing: map-get( $kendo-spacing, 1 );
+$kendo-coloreditor-preview-spacing: map.get( $kendo-spacing, 1 ) !default;
 
 /// Horizontal padding of the color editor views container.
 /// @group coloreditor
@@ -77,10 +77,10 @@ $kendo-coloreditor-views-spacing: $kendo-coloreditor-spacer !default;
 
 /// Horizontal padding of the color editor footer.
 /// @group coloreditor
-$kendo-coloreditor-footer-padding-y: map-get( $kendo-spacing, 2 ) !default;
+$kendo-coloreditor-footer-padding-y: map.get( $kendo-spacing, 2 ) !default;
 /// Vertical padding of the color editor footer.
 /// @group coloreditor
-$kendo-coloreditor-footer-padding-x: map-get( $kendo-spacing, 2 ) !default;
+$kendo-coloreditor-footer-padding-x: map.get( $kendo-spacing, 2 ) !default;
 
 /// The color of the focused colorgradient.
 /// @group coloreditor
@@ -90,4 +90,4 @@ $kendo-coloreditor-colorgradient-focus-outline-color: rgba(0, 0, 0, 0.3) !defaul
 $kendo-coloreditor-colorgradient-focus-outline: 2px !default;
 /// The outline offset of the focused colorgradient.
 /// @group coloreditor
-$kendo-coloreditor-colorgradient-focus-outline-offset: 2px !default;
+$kendo-coloreditor-colorgradient-focus-outline-offset: 2px !default;

package/scss/coloreditor/index.scss

@@ -12,9 +12,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/colorgradient/_layout.scss

@@ -1,5 +1,5 @@
-@use "../core" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-colorgradient--layout() {
 
@@ -21,7 +21,7 @@
         align-items: stretch;
         gap: var( --kendo-colorgradient-spacing, #{$kendo-colorgradient-spacing} );
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,

package/scss/colorgradient/_theme.scss

@@ -1,6 +1,5 @@
-@use "../core/mixins" as *;
-@use "../core/color-system" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-colorgradient--theme() {
 
@@ -29,7 +28,7 @@
     // Canvas
     .k-colorgradient-canvas {
         .k-hsv-gradient {
-            background: linear-gradient( to bottom, $gradient-transparent-to-black ), linear-gradient( to right, $gradient-white-to-transparent );
+            background: linear-gradient( to bottom, $kendo-gradient-transparent-to-black ), linear-gradient( to right, $kendo-gradient-white-to-transparent );
         }
 
         .k-hsv-rectangle {
@@ -97,11 +96,11 @@
 
     .k-colorgradient-slider.k-hue-slider {
         &.k-slider-horizontal .k-slider-track {
-            background: linear-gradient( to right, $gradient-rainbow );
+            background: linear-gradient( to right, $kendo-gradient-rainbow );
         }
 
         &.k-slider-vertical .k-slider-track {
-            background: linear-gradient( to top, $gradient-rainbow );
+            background: linear-gradient( to top, $kendo-gradient-rainbow );
         }
     }
 

package/scss/colorgradient/_variables.scss

@@ -1,10 +1,10 @@
+@use "sass:map";
 @use "sass:math";
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "../core/" as *;
 
 /// Spacer of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-spacer: map-get( $kendo-spacing, 4 ) !default;
+$kendo-colorgradient-spacer: map.get( $kendo-spacing, 4 ) !default;
 
 /// Default width of the color gradient.
 /// @group cologradient

package/scss/colorgradient/index.scss

@@ -12,9 +12,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/colorpalette/_layout.scss

@@ -1,5 +1,5 @@
-@use "../core" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-colorpalette--layout() {
 
@@ -14,7 +14,7 @@
         display: inline-flex;
         position: relative;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -44,7 +44,6 @@
         box-sizing: border-box;
         overflow: hidden;
         cursor: pointer;
-        -ms-high-contrast-adjust: none;
 
         &:hover,
         &.k-hover {

package/scss/colorpalette/_theme.scss

@@ -1,5 +1,5 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-colorpalette--theme() {
 

package/scss/colorpalette/_variables.scss

@@ -1,4 +1,5 @@
-@use "../core" as *;
+@use "sass:map";
+@use "../core/" as *;
 
 /// Font family of the color palette.
 /// @group colorpalette
@@ -12,7 +13,7 @@ $kendo-colorpalette-line-height: 0 !default;
 
 /// Outline width of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-outline-width: map-get( $kendo-spacing, hair ) !default;
+$kendo-colorpalette-tile-outline-width: 1px !default;
 /// Outline style of the color palette tile.
 /// @group colorpalette
 $kendo-colorpalette-tile-outline-style: solid !default;
@@ -21,7 +22,7 @@ $kendo-colorpalette-tile-outline-style: solid !default;
 $kendo-colorpalette-tile-outline: transparent !default;
 /// Width of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-width: map-get( $kendo-spacing, 6 ) !default;
+$kendo-colorpalette-tile-width: map.get( $kendo-spacing, 6 ) !default;
 /// Height of the color palette tile.
 /// @group colorpalette
 $kendo-colorpalette-tile-height: $kendo-colorpalette-tile-width !default;
@@ -30,13 +31,13 @@ $kendo-colorpalette-tile-height: $kendo-colorpalette-tile-width !default;
 $kendo-colorpalette-tile-focus-outline: get-theme-color-var( neutral-130 ) !default;
 /// Focus shadow of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-focus-shadow: inset 0 0 0 2px $white !default;
+$kendo-colorpalette-tile-focus-shadow: inset 0 0 0 2px $kendo-color-white !default;
 /// Hover outline color of the color palette tile.
 /// @group colorpalette
 $kendo-colorpalette-tile-hover-outline: get-theme-color-var( neutral-20 ) !default;
 /// Hover shadow of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-hover-shadow: inset 0 0 0 2px $kendo-colorpalette-tile-hover-outline, inset 0 0 0 4px $white !default;
+$kendo-colorpalette-tile-hover-shadow: inset 0 0 0 2px $kendo-colorpalette-tile-hover-outline, inset 0 0 0 4px $kendo-color-white !default;
 /// Selected outline color of the color palette tile.
 /// @group colorpalette
 $kendo-colorpalette-tile-selected-outline: $kendo-colorpalette-tile-hover-outline !default;

package/scss/colorpalette/index.scss

@@ -6,9 +6,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/colorpicker/_layout.scss

@@ -1,4 +1,4 @@
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-colorpicker--layout() {
 

package/scss/colorpicker/_theme.scss

@@ -1,4 +1,4 @@
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-colorpicker--theme() {
     .k-colorpicker { }

package/scss/colorpicker/_variables.scss

@@ -1 +1 @@
-@use "../core/color-system" as *;
+@use "../core/" as *;

package/scss/colorpicker/index.scss

@@ -12,9 +12,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/combobox/index.scss

@@ -11,9 +11,9 @@ $_kendo-module-meta: (
 );
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/core/_index.scss

@@ -1,30 +1,32 @@
+@use "sass:map";
+
 // Functions
-@forward "functions";
+@forward "./functions";
 
 // Variables
-@forward "variables";
+@forward "./variables";
 
 // Mixins
-@forward "mixins";
+@forward "./mixins";
 
 // Color System
-@forward "color-system";
+@forward "./color-system";
 
 // Helpers
-@use "helpers";
+@use "./helpers";
 
 // Common styles
-@use "layout";
-@use "theme";
+@use "./layout";
+@use "./theme";
 
 // Module System
-@use "module-system/" as module;
+@use "./module-system/" as module;
 
 $components: null !default;
 
 @mixin core-configure($config: null) {
     @if $config {
-        $_components: map-get( $config, "components" );
+        $_components: map.get( $config, "components" );
 
         @if ($_components) {
             module.$components: $_components;

package/scss/core/_layout.scss

@@ -1,5 +1,5 @@
-@use "mixins" as *;
-@use "_variables.scss" as *;
+@use "./mixins" as *;
+@use "./_variables.scss" as *;
 
 .k-body {
     @include typography(

package/scss/core/_theme.scss

@@ -1,5 +1,5 @@
-@use "mixins" as *;
-@use "color-system" as *;
+@use "./mixins" as *;
+@use "./color-system" as *;
 
 .k-body {
     @include fill(