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

package/scss/badge/_layout.scss

@@ -1,6 +1,6 @@
-@use "_variables.scss" as *;
-@use "../core/mixins" as *;
-@use "../core/color-system" as *;
+@use "sass:map";
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-badge--layout() {
 
@@ -60,11 +60,11 @@
 
     // Badge sizes
     @each $size, $size-props in $kendo-badge-sizes {
-        $_padding-x: map-get( $size-props, padding-x );
-        $_padding-y: map-get( $size-props, padding-y );
-        $_font-size: map-get( $size-props, font-size );
-        $_line-height: map-get( $size-props, line-height );
-        $_min-width: map-get( $size-props, min-width );
+        $_padding-x: map.get( $size-props, padding-x );
+        $_padding-y: map.get( $size-props, padding-y );
+        $_font-size: map.get( $size-props, font-size );
+        $_line-height: map.get( $size-props, line-height );
+        $_min-width: map.get( $size-props, min-width );
 
         .k-badge-#{$size} {
             --INTERNAL--kendo-badge-padding-x: var( --kendo-badge-#{$size}-padding-x, #{$_padding-x} );

package/scss/badge/_theme.scss

@@ -1,6 +1,6 @@
-@use "_variables.scss" as *;
-@use "../core/mixins" as *;
-@use "../core/color-system" as *;
+@use "sass:map";
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-badge--theme() {
 
@@ -17,9 +17,9 @@
     @each $fill-mode, $theme-colors in $kendo-badge-theme-colors {
         @each $theme-color, $color-props in $theme-colors {
 
-            $_text: map-get( $color-props, text );
-            $_bg: map-get( $color-props, bg );
-            $_border: map-get( $color-props, border );
+            $_text: map.get( $color-props, text );
+            $_bg: map.get( $color-props, bg );
+            $_border: map.get( $color-props, border );
 
             .k-badge-#{$fill-mode}-#{$theme-color} {
                 --kendo-badge-text: var( --kendo-badge-#{$fill-mode}-#{$theme-color}-text, #{$_text} );

package/scss/badge/_variables.scss

@@ -1,6 +1,5 @@
 @use "sass:map";
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "../core/" as *;
 
 /// Background color of the badge.
 /// @group badge
@@ -14,7 +13,7 @@ $kendo-badge-border: var( --kendo-component-border, initial ) !default;
 
 /// Border width of the badge.
 /// @group badge
-$kendo-badge-border-width: map-get( $kendo-spacing, hair ) !default;
+$kendo-badge-border-width: 1px !default;
 
 /// Font weight of the badge.
 /// @group badge
@@ -22,15 +21,15 @@ $kendo-badge-font-weight: var( --kendo-font-weight, normal ) !default;
 
 /// Horizontal padding of the badge.
 /// @group badge
-$kendo-badge-padding-x-sm: map-get( $kendo-spacing, thin ) !default;
-$kendo-badge-padding-x-md: map-get( $kendo-spacing, 1 ) !default;
-$kendo-badge-padding-x-lg: map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) !default;
+$kendo-badge-padding-x-sm: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-badge-padding-x-md: map.get( $kendo-spacing, 1 ) !default;
+$kendo-badge-padding-x-lg: map.get( $kendo-spacing, 1.5 ) !default;
 
 /// Vertical padding of the badge.
 /// @group badge
-$kendo-badge-padding-y-sm: map-get( $kendo-spacing, thin ) !default;
-$kendo-badge-padding-y-md: map-get( $kendo-spacing, 1 ) !default;
-$kendo-badge-padding-y-lg: map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) !default;
+$kendo-badge-padding-y-sm: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-badge-padding-y-md: map.get( $kendo-spacing, 1 ) !default;
+$kendo-badge-padding-y-lg: map.get( $kendo-spacing, 1.5 ) !default;
 
 /// Font sizes of the badge.
 /// @group badge
@@ -86,47 +85,47 @@ $kendo-badge-brand-colors: (
     info: info,
     secondary: neutral,
     tertiary: tertiary,
- );
+ ) !default;
 
 // Matrix with badge theme colors in the order: bg, color, border
 $_tc-badge-matrix: (
     solid: (
-        normal: (100, $white, 100)
+        normal: (100, $kendo-color-white, 100)
     ),
     outline: (
-        normal: ($white, 100, 100)
+        normal: ($kendo-color-white, 100, 100)
     )
-);
+) !default;
 
 $_tc-badge-warning-matrix: (
     solid: (
         normal: (100, get-theme-color-var( neutral-160 ), 100)
     ),
     outline: (
-        normal: ($white, 100, 100)
+        normal: ($kendo-color-white, 100, 100)
     )
-);
+) !default;
 
 $_tc-badge-dark-matrix: (
     solid: (
-        normal: (160, $white, 160)
+        normal: (160, $kendo-color-white, 160)
     ),
     outline: (
-        normal: ($white, 160, 160)
+        normal: ($kendo-color-white, 160, 160)
     )
-);
+) !default;
 
 $_tc-badge-light-matrix: (
     solid: (
         normal: (50, 160, 50)
     ),
     outline: (
-        normal: ($white, 50, 50)
+        normal: ($kendo-color-white, 50, 50)
     )
-);
+) !default;
 
 /// Theme colors map for the badge variations.
-$kendo-badge-theme-colors: ();
+$kendo-badge-theme-colors: () !default;
 
 @each $fill-mode, $ui-states in $_tc-badge-matrix {
     @each $brand-color, $palette in $kendo-badge-brand-colors {

package/scss/badge/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/bottom-navigation/_layout.scss

@@ -1,5 +1,5 @@
-@use "../core/_variables.scss" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-bottom-navigation--layout() {
 

package/scss/bottom-navigation/_theme.scss

@@ -1,5 +1,6 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-bottom-navigation--theme() {
 
@@ -51,22 +52,22 @@
     @each $fill-mode, $theme-colors in $kendo-bottom-nav-theme-colors {
         @each $theme-color, $color-props in $theme-colors {
 
-            $_text-color: map-get( $color-props, text );
-            $_bg: map-get( $color-props, bg );
-            $_border-color: map-get( $color-props, border );
+            $_text-color: map.get( $color-props, text );
+            $_bg: map.get( $color-props, bg );
+            $_border-color: map.get( $color-props, border );
 
-            $_focus-text: map-get( $color-props, focus-text );
-            $_focus-bg: map-get( $color-props, focus-bg );
-            $_focus-border: map-get( $color-props, focus-border );
-            $_focus-outline: map-get( $color-props, focus-outline );
+            $_focus-text: map.get( $color-props, focus-text );
+            $_focus-bg: map.get( $color-props, focus-bg );
+            $_focus-border: map.get( $color-props, focus-border );
+            $_focus-outline: map.get( $color-props, focus-outline );
 
-            $_active-text: map-get( $color-props, active-text );
-            $_active-bg: map-get( $color-props, active-bg );
-            $_active-border: map-get( $color-props, active-border );
+            $_active-text: map.get( $color-props, active-text );
+            $_active-bg: map.get( $color-props, active-bg );
+            $_active-border: map.get( $color-props, active-border );
 
-            $_disabled-text: map-get( $color-props, disabled-text );
-            $_disabled-bg: map-get( $color-props, disabled-bg );
-            $_disabled-border: map-get( $color-props, disabled-border );
+            $_disabled-text: map.get( $color-props, disabled-text );
+            $_disabled-bg: map.get( $color-props, disabled-bg );
+            $_disabled-border: map.get( $color-props, disabled-border );
 
             .k-bottom-nav-#{$fill-mode}.k-bottom-nav-#{$theme-color} {
                 --kendo-bottom-nav-text: var( --kendo-bottom-nav-#{$fill-mode}-#{$theme-color}-text, #{$_text-color} );

package/scss/bottom-navigation/_variables.scss

@@ -1,10 +1,9 @@
 @use "sass:map";
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "../core/" as *;
 
 /// Horizontal padding of the bottom navigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-padding-x: map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) !default;
+$kendo-bottom-nav-padding-x: map.get( $kendo-spacing, 1.5 ) !default;
 /// Vertical padding of the bottom navigation.
 /// @group bottom-navigation
 $kendo-bottom-nav-padding-y: $kendo-bottom-nav-padding-x !default;
@@ -29,14 +28,14 @@ $kendo-bottom-nav-letter-spacing: .2px !default;
 
 /// Size of the focused bottom navigation item icon.
 /// @group bottom-nav
-$kendo-bottom-nav-item-icon-size: map-get( $kendo-spacing, 6 ) !default;
+$kendo-bottom-nav-item-icon-size: map.get( $kendo-spacing, 6 ) !default;
 
 /// Horizontal padding of the bottom navigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-padding-x: map-get( $kendo-spacing, 2 ) !default;
+$kendo-bottom-nav-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
 /// Vertical padding of the bottom navigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-padding-y: map-get( $kendo-spacing, thin ) !default;
+$kendo-bottom-nav-item-padding-y: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 /// Minimum width of the bottom navigation item.
 /// @group bottom-navigation
 $kendo-bottom-nav-item-min-width: 72px !default;
@@ -51,20 +50,20 @@ $kendo-bottom-nav-item-min-height: calc( #{$kendo-bottom-nav-item-icon-size} + #
 $kendo-bottom-nav-item-border-radius: var( --kendo-border-radius-md, 0 ) !default;
 /// Spacing of the bottom navigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-gap: map-get( $kendo-spacing, 1 ) !default;
+$kendo-bottom-nav-item-gap: map.get( $kendo-spacing, 1 ) !default;
 /// Offset of the focused bottom navigation item.
 /// @group bottom-nav
-$kendo-bottom-nav-item-focus-offset: map-get( $kendo-spacing, thin ) !default;
+$kendo-bottom-nav-item-focus-offset: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 /// Outline width of the focused bottom navigation item.
 /// @group bottom-nav
-$kendo-bottom-nav-item-focus-outline-width: map-get( $kendo-spacing, hair ) !default;
+$kendo-bottom-nav-item-focus-outline-width: 1px !default;
 /// Outline style of the focused bottom navigation item.
 /// @group bottom-nav
 $kendo-bottom-nav-item-focus-outline-style: solid !default;
 
 /// Vertical margin of the focused bottom navigation item icon.
 /// @group bottom-nav
-$kendo-bottom-nav-item-icon-margin-y: map-get( $kendo-spacing, 2 ) !default;
+$kendo-bottom-nav-item-icon-margin-y: map.get( $kendo-spacing, 2 ) !default;
 /// Horizontal margin of the focused bottom navigation item icon.
 /// @group bottom-nav
 $kendo-bottom-nav-item-icon-margin-x: $kendo-bottom-nav-item-icon-margin-y !default;
@@ -81,71 +80,71 @@ $kendo-bottom-nav-brand-colors: (
     info: info,
     secondary: neutral,
     tertiary: tertiary,
- );
+ ) !default;
 
 // Matrix with bottom-nav theme colors in the order: bg, color, border
 $_tc-bottom-nav-matrix: (
     solid: (
-        normal: (100, $white, 100),
-        focus: (100, $white, 100, inherit),
-        active: (120, $white, 120),
+        normal: (100, $kendo-color-white, 100),
+        focus: (100, $kendo-color-white, 100, inherit),
+        active: (120, $kendo-color-white, 120),
         disabled: ( inherit, 40, var( --kendo-disabled-border, inherit ))
     ),
     flat: (
-        normal: ($white, get-theme-color-var( neutral-130 ), get-theme-color-var( neutral-30 )),
+        normal: ($kendo-color-white, get-theme-color-var( neutral-130 ), get-theme-color-var( neutral-30 )),
         focus: (inherit, 100, transparent, 100),
         active: (inherit, 100, transparent),
         disabled: (initial, var( --kendo-disabled-text, inherit ), initial)
     )
-);
+) !default;
 
 $_tc-bottom-nav-warning-matrix: (
     solid: (
         normal: (100, get-theme-color-var( neutral-160 ), 100),
-        focus: (100, get-theme-color-var( neutral-160 ), 100, $white),
+        focus: (100, get-theme-color-var( neutral-160 ), 100, $kendo-color-white),
         active: (120, get-theme-color-var( neutral-190 ), 120),
         disabled: (inherit, get-theme-color-var( neutral-120 ), var( --kendo-disabled-border, inherit ))
     ),
     flat: (
-        normal: ($white, get-theme-color-var( neutral-130 ), 100),
+        normal: ($kendo-color-white, get-theme-color-var( neutral-130 ), 100),
         focus: (inherit, 100, transparent, 100),
         active: (inherit, 100, transparent),
         disabled: (initial, var( --kendo-disabled-text, inherit ), initial)
     )
-);
+) !default;
 
 $_tc-bottom-nav-dark-matrix: (
     solid: (
-        normal: (160, $white, 160),
-        focus: (160, $white, 160, $white),
-        active: (180, $white, 180),
+        normal: (160, $kendo-color-white, 160),
+        focus: (160, $kendo-color-white, 160, $kendo-color-white),
+        active: (180, $kendo-color-white, 180),
         disabled: (inherit, 60 , var( --kendo-disabled-border, inherit ))
     ),
     flat: (
-        normal: ($white, get-theme-color-var( neutral-130 ), get-theme-color-var( neutral-140 )),
+        normal: ($kendo-color-white, get-theme-color-var( neutral-130 ), get-theme-color-var( neutral-140 )),
         focus: (inherit, 160, transparent, 130),
         active: (inherit, 170, transparent),
         disabled: (inherit, var( --kendo-disabled-text, inherit ), initial)
     )
-);
+) !default;
 
 $_tc-bottom-nav-light-matrix: (
     solid: (
         normal: (50, get-theme-color-var( neutral-160 ), 50),
-        focus: (50, 190, 50, $white),
+        focus: (50, 190, 50, $kendo-color-white),
         active: (70, 190, 70),
         disabled: (inherit, 120 , var( --kendo-disabled-border, inherit ))
     ),
     flat: (
-        normal: ($white, get-theme-color-var( neutral-130 ), transparent),
+        normal: ($kendo-color-white, get-theme-color-var( neutral-130 ), transparent),
         focus: (inherit, 130, transparent, 130),
         active: (inherit, 130, transparent),
         disabled: (inherit, var( --kendo-disabled-text, inherit ), initial)
     )
-);
+) !default;
 
 /// Theme colors map for the bottom-nav variations.
-$kendo-bottom-nav-theme-colors: ();
+$kendo-bottom-nav-theme-colors: () !default;
 
 @each $fill-mode, $ui-states in $_tc-bottom-nav-matrix {
     @each $brand-color, $palette in $kendo-bottom-nav-brand-colors {

package/scss/bottom-navigation/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/breadcrumb/_layout.scss

@@ -1,5 +1,5 @@
 @use "../core/" as *;
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-breadcrumb--layout() {
 
@@ -19,7 +19,7 @@
         display: flex;
         flex-direction: row;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,

package/scss/breadcrumb/_theme.scss

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

package/scss/breadcrumb/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../core/" as *;
 @use "../icon/_variables.scss" as *;
 
@@ -40,10 +41,10 @@ $kendo-breadcrumb-focus-shadow: 0 0 0 1px get-theme-color-var( neutral-30 ) !def
 
 /// The horizontal padding of the breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-padding-x: map-get( $kendo-spacing, 2 ) !default;
+$kendo-breadcrumb-link-padding-x: map.get( $kendo-spacing, 2 ) !default;
 /// The vertical padding of the breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-padding-y: map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) !default;
+$kendo-breadcrumb-link-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
 /// The radius of the border around the breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-border-radius: 0px !default;

package/scss/breadcrumb/index.scss

@@ -9,9 +9,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/button/_layout.scss

@@ -1,6 +1,7 @@
+@use "sass:map";
 @use "sass:math";
-@use "../core" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-button--layout() {
 
@@ -72,10 +73,10 @@
 
     // Sizing
     @each $size, $size-props in $kendo-button-sizes {
-        $_padding-x: map-get( $size-props, padding-x );
-        $_padding-y: map-get( $size-props, padding-y );
-        $_font-size: map-get( $size-props, font-size );
-        $_line-height: map-get( $size-props, line-height );
+        $_padding-x: map.get( $size-props, padding-x );
+        $_padding-y: map.get( $size-props, padding-y );
+        $_font-size: map.get( $size-props, font-size );
+        $_line-height: map.get( $size-props, line-height );
 
         $_icon-button-padding: math.div( $_padding-x, 2 );
 
@@ -280,7 +281,7 @@
         vertical-align: middle;
         position: relative;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         > .k-button + .k-button {
             margin-inline-start: if( $kendo-button-border-width == 0, null, -$kendo-button-border-width );

package/scss/button/_theme.scss

@@ -1,5 +1,6 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-button--theme() {
     .k-button {
@@ -82,34 +83,34 @@
 
     @each $fill-mode, $theme-colors in $kendo-button-theme-colors {
         @each $theme-color, $color-props in $theme-colors {
-            $_text-color: map-get( $color-props, text );
-            $_bg: map-get( $color-props, bg );
-            $_border-color: map-get( $color-props, border );
-
-            $_focus-text: map-get( $color-props, focus-text );
-            $_focus-bg: map-get( $color-props, focus-bg );
-            $_focus-border: map-get( $color-props, focus-border );
-            $_focus-outline: map-get( $color-props, focus-outline );
-
-            $_focus-hover-text: map-get( $color-props, focus-hover-text );
-            $_focus-hover-bg: map-get( $color-props, focus-hover-bg );
-            $_focus-hover-border: map-get( $color-props, focus-hover-border );
-
-            $_hover-text: map-get( $color-props, hover-text );
-            $_hover-bg: map-get( $color-props, hover-bg );
-            $_hover-border: map-get( $color-props, hover-border );
-
-            $_active-text: map-get( $color-props, active-text );
-            $_active-bg: map-get( $color-props, active-bg );
-            $_active-border: map-get( $color-props, active-border );
-
-            $_active-hover-text: map-get( $color-props, active-hover-text );
-            $_active-hover-bg: map-get( $color-props, active-hover-bg );
-            $_active-hover-border: map-get( $color-props, active-hover-border );
-
-            $_disabled-text: map-get( $color-props, disabled-text );
-            $_disabled-bg: map-get( $color-props, disabled-bg );
-            $_disabled-border: map-get( $color-props, disabled-border );
+            $_text-color: map.get( $color-props, text );
+            $_bg: map.get( $color-props, bg );
+            $_border-color: map.get( $color-props, border );
+
+            $_focus-text: map.get( $color-props, focus-text );
+            $_focus-bg: map.get( $color-props, focus-bg );
+            $_focus-border: map.get( $color-props, focus-border );
+            $_focus-outline: map.get( $color-props, focus-outline );
+
+            $_focus-hover-text: map.get( $color-props, focus-hover-text );
+            $_focus-hover-bg: map.get( $color-props, focus-hover-bg );
+            $_focus-hover-border: map.get( $color-props, focus-hover-border );
+
+            $_hover-text: map.get( $color-props, hover-text );
+            $_hover-bg: map.get( $color-props, hover-bg );
+            $_hover-border: map.get( $color-props, hover-border );
+
+            $_active-text: map.get( $color-props, active-text );
+            $_active-bg: map.get( $color-props, active-bg );
+            $_active-border: map.get( $color-props, active-border );
+
+            $_active-hover-text: map.get( $color-props, active-hover-text );
+            $_active-hover-bg: map.get( $color-props, active-hover-bg );
+            $_active-hover-border: map.get( $color-props, active-hover-border );
+
+            $_disabled-text: map.get( $color-props, disabled-text );
+            $_disabled-bg: map.get( $color-props, disabled-bg );
+            $_disabled-border: map.get( $color-props, disabled-border );
 
             .k-button-#{$fill-mode}-#{$theme-color} {
                 --kendo-button-text: var( --kendo-button-#{$fill-mode}-#{$theme-color}-text, #{$_text-color} );