@progress/kendo-theme-fluent 6.5.0-dev.1 → 6.5.0-dev.2

package/scss/checkbox/_variables.scss

@@ -45,21 +45,21 @@ $kendo-checkbox-bg: $kendo-component-bg !default;
 $kendo-checkbox-text: transparent !default;
 /// The border color of the CheckBox.
 /// @group checkbox
-$kendo-checkbox-border: get-theme-color-var( neutral-160 ) !default;
+$kendo-checkbox-border: k-get-theme-color-var( neutral-160 ) !default;
 
 /// The background color of the hovered CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-bg: $kendo-checkbox-bg !default;
 /// The text color of the hovered CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-text: get-theme-color( neutral, 130 ) !default;
+$kendo-checkbox-hover-text: k-get-theme-color( neutral, 130 ) !default;
 /// The border color of the hovered CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-border: $kendo-checkbox-border !default;
 
 /// The background color of the checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-checked-bg: get-theme-color-var( primary-100 ) !default;
+$kendo-checkbox-checked-bg: k-get-theme-color-var( primary-100 ) !default;
 /// The text color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-text: $kendo-color-white !default;
@@ -69,7 +69,7 @@ $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
 
 /// The background of the hovered and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-checked-bg: get-theme-color-var( primary-110 ) !default;
+$kendo-checkbox-hover-checked-bg: k-get-theme-color-var( primary-110 ) !default;
 /// The text color of the hovered and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-checked-text: $kendo-color-white !default;
@@ -85,7 +85,7 @@ $kendo-checkbox-focus-border: null !default;
 $kendo-checkbox-focus-shadow: null !default;
 /// 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: 1px solid k-get-theme-color-var( neutral-130 ) !default;
 $kendo-checkbox-focus-outline-offset: 2px !default;
 
 /// The background color of the indeterminate CheckBox.
@@ -93,50 +93,50 @@ $kendo-checkbox-focus-outline-offset: 2px !default;
 $kendo-checkbox-indeterminate-bg: $kendo-checkbox-bg !default;
 /// The text color of the indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-indeterminate-text: get-theme-color( primary, 100 ) !default;
+$kendo-checkbox-indeterminate-text: k-get-theme-color( primary, 100 ) !default;
 /// The border color of the indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-indeterminate-border: get-theme-color-var( primary-100 ) !default;
+$kendo-checkbox-indeterminate-border: k-get-theme-color-var( primary-100 ) !default;
 
 /// The background color of the hovered and indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-indeterminate-bg: $kendo-checkbox-bg !default;
 /// The text color of the hovered and indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-indeterminate-text: get-theme-color( primary, 110 ) !default;
+$kendo-checkbox-hover-indeterminate-text: k-get-theme-color( primary, 110 ) !default;
 /// The border color of the hovered and indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-indeterminate-border: get-theme-color-var( primary-110 ) !default;
+$kendo-checkbox-hover-indeterminate-border: k-get-theme-color-var( primary-110 ) !default;
 
 /// The background color of the disabled CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-bg: $kendo-checkbox-bg !default;
 /// The text color of the disabled CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-text: get-theme-color-var( neutral-60 ) !default;
+$kendo-checkbox-disabled-text: k-get-theme-color-var( neutral-60 ) !default;
 /// The border color of the disabled CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-border: get-theme-color-var( neutral-60 ) !default;
+$kendo-checkbox-disabled-border: k-get-theme-color-var( neutral-60 ) !default;
 
 /// The background color of the disabled and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-bg: get-theme-color-var( neutral-60 ) !default;
+$kendo-checkbox-disabled-checked-bg: k-get-theme-color-var( neutral-60 ) !default;
 /// The text color of the disabled and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-text: $kendo-color-white !default;
 /// The border color of the disabled and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-border: get-theme-color-var( neutral-60 ) !default;
+$kendo-checkbox-disabled-checked-border: k-get-theme-color-var( neutral-60 ) !default;
 
 /// The background color of the disabled and indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-indeterminate-bg: $kendo-checkbox-bg !default;
 /// The border color of the disabled and indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-indeterminate-text: get-theme-color( neutral, 60 ) !default;
+$kendo-checkbox-disabled-indeterminate-text: k-get-theme-color( neutral, 60 ) !default;
 /// The border color of the disabled and indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-indeterminate-border: get-theme-color-var( neutral-60 ) !default;
+$kendo-checkbox-disabled-indeterminate-border: k-get-theme-color-var( neutral-60 ) !default;
 
 /// The background color of an invalid CheckBox.
 /// @group checkbox
@@ -212,7 +212,7 @@ $kendo-checkbox-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 
 /// The background color of the CheckBox' ripple.
 /// @group checkbox
-$kendo-checkbox-ripple-bg: get-theme-color-var( primary-100 ) !default;
+$kendo-checkbox-ripple-bg: k-get-theme-color-var( primary-100 ) !default;
 /// The opacity of the CheckBox' ripple.
 /// @group checkbox
 $kendo-checkbox-ripple-opacity: .25 !default;

package/scss/chip/_variables.scss

@@ -37,7 +37,7 @@ $kendo-chip-solid-disabled-border: var( --kendo-disabled-border, inherit ) !defa
 $kendo-chip-outline-disabled-bg: var( $kendo-component-bg, transparent ) !default;
 /// The border color of the outline disabled Chip.
 /// @group chip
-$kendo-chip-outline-disabled-border: get-theme-color-var( neutral-90 ) !default;
+$kendo-chip-outline-disabled-border: k-get-theme-color-var( neutral-90 ) !default;
 
 /// The offset of the outline focused Chip.
 /// @group chip
@@ -129,8 +129,8 @@ $_tc-base-matrix: (
         hover: (30, 190, 30),
         focus: (20, 160, 130),
         focus-hover: (20, 190, 130),
-        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 )),
+        selected: (k-get-theme-color-var( primary-100 ), $kendo-color-white, k-get-theme-color-var( primary-100 )),
+        selected-hover: (k-get-theme-color-var( primary-100 ), $kendo-color-white, k-get-theme-color-var( primary-100 )),
         disabled: (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit ))
     ),
     outline: (
@@ -169,12 +169,12 @@ $_tc-brand-matrix: (
 // The color matrix for the warning Chips
 $_tc-warning-matrix: (
     solid: (
-        normal: (20, get-theme-color-var( grey-160 ), 20),
-        hover: (30, get-theme-color-var( grey-190 ), 30),
-        focus: (20, get-theme-color-var( grey-160 ), 160),
-        focus-hover: (20, get-theme-color-var( grey-190 ), 160),
-        selected: (40, get-theme-color-var( grey-190 ), 40),
-        selected-hover: (30, get-theme-color-var( grey-190 ), 30),
+        normal: (20, k-get-theme-color-var( grey-160 ), 20),
+        hover: (30, k-get-theme-color-var( grey-190 ), 30),
+        focus: (20, k-get-theme-color-var( grey-160 ), 160),
+        focus-hover: (20, k-get-theme-color-var( grey-190 ), 160),
+        selected: (40, k-get-theme-color-var( grey-190 ), 40),
+        selected-hover: (30, k-get-theme-color-var( grey-190 ), 30),
         disabled: (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit ))
     ),
     outline: (
@@ -195,7 +195,7 @@ $kendo-chip-theme-colors: () !default;
 @each $fill-mode, $ui-states in $_tc-base-matrix {
     $kendo-chip-theme-colors: map.deep-merge(
         $kendo-chip-theme-colors,
-        generate-fill-mode-theme-variation( $fill-mode, base, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, base, neutral, $ui-states )
     );
 }
 
@@ -204,7 +204,7 @@ $kendo-chip-theme-colors: () !default;
     @each $brand-color in $kendo-chip-brand-colors {
         $kendo-chip-theme-colors: map.deep-merge(
             $kendo-chip-theme-colors,
-            generate-fill-mode-theme-variation( $fill-mode, $brand-color, $brand-color, $ui-states )
+            k-generate-fill-mode-theme-variation( $fill-mode, $brand-color, $brand-color, $ui-states )
         )
     }
 }
@@ -213,7 +213,7 @@ $kendo-chip-theme-colors: () !default;
 @each $fill-mode, $ui-states in $_tc-warning-matrix {
     $kendo-chip-theme-colors: map.deep-merge(
         $kendo-chip-theme-colors,
-        generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
     );
 }
 

package/scss/color-preview/_variables.scss

@@ -2,7 +2,7 @@
 
 /// Border radius of the color preview.
 /// @group color-preview
-$kendo-color-preview-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+$kendo-color-preview-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
 /// Border width of the color preview.
 /// @group color-preview
 $kendo-color-preview-border-width: 1px !default;
@@ -14,17 +14,17 @@ $kendo-color-preview-bg: transparent !default;
 $kendo-color-preview-text: inherit !default;
 /// Border color of the color preview.
 /// @group color-preview
-$kendo-color-preview-border: get-theme-color-var( neutral-60 ) !default;
+$kendo-color-preview-border: k-get-theme-color-var( neutral-60 ) !default;
 /// Hover Border color of the color preview.
 /// @group color-preview
-$kendo-color-preview-hover-border: get-theme-color-var( neutral-60 ) !default;
+$kendo-color-preview-hover-border: k-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: $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;
+$kendo-color-preview-no-color-text: k-get-theme-color( error, 190 ) !default;
 /// Border color of the color preview when no color is selected.
 /// @group color-preview
 $kendo-color-preview-no-color-border: currentColor !default;

package/scss/coloreditor/_variables.scss

@@ -14,7 +14,7 @@ $kendo-color-editor-min-width: 260px !default;
 $kendo-color-editor-border-width: 1px !default;
 /// The border radius of the ColorEditor.
 /// @group coloreditor
-$kendo-color-editor-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+$kendo-color-editor-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
 /// The font family of the ColorEditor.
 /// @group coloreditor
 $kendo-color-editor-font-family: var( --kendo-font-family, inherit ) !default;
@@ -39,7 +39,7 @@ $kendo-color-editor-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 
 /// The border color of the focused ColorEditor.
 /// @group coloreditor
-$kendo-color-editor-focus-border: get-theme-color-var( neutral-20 ) !default;
+$kendo-color-editor-focus-border: k-get-theme-color-var( neutral-20 ) !default;
 /// The box shadow of the focused ColorEditor.
 /// @group coloreditor
 $kendo-color-editor-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default;

package/scss/colorgradient/_variables.scss

@@ -14,7 +14,7 @@ $kendo-color-gradient-width: 260px !default;
 $kendo-color-gradient-border-width: 1px !default;
 /// The border radius of the ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+$kendo-color-gradient-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
 /// The vertical padding of the ColorGradient.
 /// @group cologradient
 $kendo-color-gradient-padding-y: $kendo-color-gradient-spacer !default;
@@ -49,7 +49,7 @@ $kendo-color-gradient-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 
 /// The border color of the focused ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-focus-border: get-theme-color-var( neutral-20 ) !default;
+$kendo-color-gradient-focus-border: k-get-theme-color-var( neutral-20 ) !default;
 /// The box shadow of the focused ColorGradient.
 /// @group cologradient
 $kendo-color-gradient-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
@@ -59,7 +59,7 @@ $kendo-color-gradient-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !def
 $kendo-color-gradient-canvas-border-width: 0 !default;
 /// The border radius of the ColorGradient canvas.
 /// @group cologradient
-$kendo-color-gradient-canvas-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+$kendo-color-gradient-canvas-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
 /// The spacing between the items of the ColorGradient canvas.
 /// @group cologradient
 $kendo-color-gradient-canvas-spacing: math.div( $kendo-color-gradient-spacer, 2 ) !default;
@@ -68,7 +68,7 @@ $kendo-color-gradient-canvas-spacing: math.div( $kendo-color-gradient-spacer, 2
 $kendo-color-gradient-canvas-rectangle-height: 180px !default;
 /// The border color of the ColorGradient canvas hsv rectangle.
 /// @group cologradient
-$kendo-color-gradient-canvas-rectangle-border: get-theme-color-var( neutral-30 ) !default;
+$kendo-color-gradient-canvas-rectangle-border: k-get-theme-color-var( neutral-30 ) !default;
 /// The box shadow of the ColorGradient canvas drag handle.
 /// @group cologradient
 $kendo-color-gradient-canvas-draghandle-shadow: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13), inset 0px 0px 0px 3px #FFFFFF !default;
@@ -78,13 +78,13 @@ $kendo-color-gradient-canvas-draghandle-shadow: 0px 0.6px 1.8px rgba(0, 0, 0, 0.
 $kendo-color-gradient-slider-track-size: 20px !default;
 /// The border radius of the ColorGradient slider.
 /// @group cologradient
-$kendo-color-gradient-slider-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+$kendo-color-gradient-slider-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
 /// The width of the border around the ColorGradient slider.
 /// @group cologradient
 $kendo-color-gradient-slider-border-width: 1px !default;
 /// The color of the border around the ColorGradient slider.
 /// @group cologradient
-$kendo-color-gradient-slider-border: get-theme-color-var( neutral-30 ) !default;
+$kendo-color-gradient-slider-border: k-get-theme-color-var( neutral-30 ) !default;
 
 /// The height of the ColorGradient vertical slider.
 /// @group cologradient
@@ -107,13 +107,13 @@ $kendo-color-gradient-draghandle-height: 20px !default;
 $kendo-color-gradient-draghandle-border-width: 1px !default;
 /// The color of the border around the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-border: get-theme-color-var( neutral-110 ) !default;
+$kendo-color-gradient-draghandle-border: k-get-theme-color-var( neutral-110 ) !default;
 /// The box shadow of the ColorGradient canvas drag handle.
 /// @group cologradient
 $kendo-color-gradient-draghandle-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 /// The color of the border around the focused ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-focus-border: get-theme-color-var( neutral-160 ) !default;
+$kendo-color-gradient-draghandle-focus-border: k-get-theme-color-var( neutral-160 ) !default;
 /// The box shadow of the focused ColorGradient canvas drag handle.
 /// @group cologradient
 $kendo-color-gradient-draghandle-focus-shadow: $kendo-color-gradient-draghandle-shadow !default;

package/scss/colorpalette/_variables.scss

@@ -28,13 +28,13 @@ $kendo-color-palette-tile-width: map.get( $kendo-spacing, 6 ) !default;
 $kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
 /// The outline color of the ColorPalette focused tile.
 /// @group colorpalette
-$kendo-color-palette-tile-focus-outline: get-theme-color-var( neutral-130 ) !default;
+$kendo-color-palette-tile-focus-outline: k-get-theme-color-var( neutral-130 ) !default;
 /// The shadow of the ColorPalette focused tile.
 /// @group colorpalette
 $kendo-color-palette-tile-focus-shadow: inset 0 0 0 2px $kendo-color-white !default;
 /// The outline color of the ColorPalette hovered tile.
 /// @group colorpalette
-$kendo-color-palette-tile-hover-outline: get-theme-color-var( neutral-20 ) !default;
+$kendo-color-palette-tile-hover-outline: k-get-theme-color-var( neutral-20 ) !default;
 /// The shadow of the ColorPalette hovered tile.
 /// @group colorpalette
 $kendo-color-palette-tile-hover-shadow: inset 0 0 0 2px $kendo-color-palette-tile-hover-outline, inset 0 0 0 4px $kendo-color-white !default;

package/scss/core/_index.scss

@@ -1,24 +1,19 @@
 @use "sass:map";
 
-// Functions
-@forward "./functions";
+// Palettes
+@use "./color-system/palettes" as *;
 
 // Variables
+@use "./variables" as *;
 @forward "./variables";
 
-// Mixins
-@forward "./mixins";
-
-// Color System
-@forward "./color-system";
+@forward "@progress/kendo-theme-core/scss/index.import.scss" with (
+    $kendo-palettes: $kendo-fluent-palettes
+);
 
 // Helpers
 @use "./helpers";
 
-// Common styles
-@use "./layout";
-@use "./theme";
-
 // Module System
 @use "./module-system/" as module;
 

package/scss/core/_variables.scss

@@ -2,54 +2,10 @@
 @use "sass:math";
 @use "sass:meta";
 
-// Options
-$kendo-enable-shadows: true !default;
-$kendo-enable-rounded: true !default;
-$kendo-enable-gradients: true !default;
-$kendo-enable-transitions: true !default;
-
 $kendo-use-input-button-width: true !default;
 $kendo-use-input-spinner-width: true !default;
 $kendo-use-input-spinner-icon-offset: false !default;
 
-$kendo-spacing: (
-    0: 0,
-    1px: 1px,
-    0.5: .125rem,
-    1: .25rem,
-    1.5: .375rem,
-    2: .5rem,
-    2.5: .625rem,
-    3: .75rem,
-    3.5: .875rem,
-    4: 1rem,
-    4.5: 1.125rem,
-    5: 1.25rem,
-    5.5: 1.375rem,
-    6: 1.5rem,
-    6.5: 1.625rem,
-    7: 1.75rem,
-    7.5: 1.875rem,
-    8: 2rem,
-    9: 2.25rem,
-    10: 2.5rem,
-    11: 2.75rem,
-    12: 3rem,
-    13: 3.25rem,
-    14: 3.5rem,
-    15: 3.75rem,
-    16: 4rem,
-    17: 4.25rem,
-    18: 4.5rem,
-    19: 4.75rem,
-    20: 5rem,
-    21: 5.25rem,
-    22: 5.5rem,
-    23: 5.75rem,
-    24: 6rem
-) !default;
-
-
 /// Base font size across all components.
 $kendo-font-size: 14px !default;
 $kendo-font-size-xs: 10px !default;
@@ -87,42 +43,11 @@ $kendo-font-weight-bold: 600 !default;
 
 $kendo-letter-spacing: normal !default;
 
-$kendo-scrollbar-width: 17px !default;
-
-/// Border radius for all components.
-$kendo-border-radius: map.get( $kendo-spacing, 0.5 ) !default;
-$kendo-border-radius-sm: math.div( $kendo-border-radius, 2 ) !default;
-$kendo-border-radius-md: $kendo-border-radius !default;
-$kendo-border-radius-lg: ( $kendo-border-radius * 2 ) !default;
-
-$kendo-border-radii: (
-    DEFAULT: var( --kendo-border-radius-md, $kendo-border-radius-md ),
-    0: 0,
-    sm: var( --kendo-border-radius-sm, $kendo-border-radius-sm ),
-    md: var( --kendo-border-radius-md, $kendo-border-radius-md ),
-    lg: var( --kendo-border-radius-lg, $kendo-border-radius-lg ),
-    none: 0,
-    full: 9999px
-) !default;
-
-
-// Metrics
-$kendo-padding-x: map.get( $kendo-spacing, 2 ) !default;
-$kendo-padding-y: map.get( $kendo-spacing, 1 ) !default;
-$kendo-padding-sm-x: map.get( $kendo-spacing, 1 ) !default;
-$kendo-padding-sm-y: map.get( $kendo-spacing, 0.5 ) !default;
-$kendo-padding-md-x: map.get( $kendo-spacing, 2 ) !default;
-$kendo-padding-md-y: map.get( $kendo-spacing, 1 ) !default;
-$kendo-padding-lg-x: map.get( $kendo-spacing, 3 ) !default;
-$kendo-padding-lg-y: map.get( $kendo-spacing, 1.5 ) !default;
+// $kendo-scrollbar-width: 17px !default;
 
 // Default transition
 $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, opacity .2s ease-in-out, width .2s ease-in-out, height .2s ease-in-out !default;
 
-// Loading
-$kendo-loading-opacity: .3 !default;
-$kendo-zindex-loading: 100 !default;
-
 @mixin core-styles() {
     :root {
         --kendo-font-family: #{meta.inspect($kendo-font-family)};
@@ -146,9 +71,6 @@ $kendo-zindex-loading: 100 !default;
 
         --kendo-letter-spacing: #{$kendo-letter-spacing};
 
-        --kendo-border-radius-sm: #{$kendo-border-radius-sm};
-        --kendo-border-radius-md: #{$kendo-border-radius-md};
-        --kendo-border-radius-lg: #{$kendo-border-radius-lg};
 
         --kendo-transition: #{$kendo-transition};
     }

package/scss/core/color-system/_index.scss

@@ -1,3 +1 @@
 @forward "./utils";
-@forward "./palettes";
-@forward "./variables";

package/scss/core/color-system/utils/_functions.scss

@@ -1,67 +1,5 @@
-@use "sass:map";
-@use "sass:list";
-@use "../palettes" as *;
+@use '../palettes' as *;
 
-@function get-theme-palette($name) {
-    @return map.get( $kendo-fluent-palettes, $name );
-}
-
-@function get-theme-color($palette, $hue) {
-    @return map.get( get-theme-palette( $palette ), $hue );
-}
-
-@function get-theme-color-var( $name, $fallback: "inherit", $prefix: "kendo") {
-    @return var( --#{$prefix}-#{$name}, #{$fallback} );
-}
-
-@function generate-theme-variation( $theme-color, $source-palette-name, $mapping ) {
-    $temp: ();
-
-    @each $ui-state, $indices in $mapping {
-        $prefix: if( $ui-state == normal, '', '#{$ui-state}-' );
-
-        $bg-prop: list.nth($indices, 1);
-        $text-prop: list.nth($indices, 2);
-        $border-prop: list.nth($indices, 3);
-
-        // Take value from the palette only if it is a number
-        $bg: if( type_of($bg-prop) == number, get-theme-color-var( #{$source-palette-name}-#{$bg-prop} ), $bg-prop );
-        $text: if( type_of($text-prop) == number, get-theme-color-var( #{$source-palette-name}-#{$text-prop} ), $text-prop );
-        $border: if( type_of($border-prop) == number, get-theme-color-var( #{$source-palette-name}-#{$border-prop} ), $border-prop );
-
-        $temp: map.deep-merge( $temp, (
-            #{$prefix}bg: $bg,
-            #{$prefix}text: $text,
-            #{$prefix}border: $border
-        ));
-
-        // Add outline if provided in the map
-        @if ( list.length($indices) > 3 ) {
-            $outline-prop: list.nth($indices, 4);
-            $outline: if( type_of($outline-prop) == number, get-theme-color-var( #{$source-palette-name}-#{$outline-prop} ), $outline-prop );
-
-            $temp: map.deep-merge( $temp, (
-                #{$prefix}outline: $outline
-            ));
-        }
-    }
-
-    $map: (
-        #{$theme-color}: $temp
-    );
-
-    @return $map;
-
-};
-
-
-@function generate-fill-mode-theme-variation( $fill-mode, $theme-color, $source-palette-name, $mapping ) {
-
-    $map: generate-theme-variation( $theme-color, $source-palette-name, $mapping );
-
-    $result: (
-       #{$fill-mode}: $map
-    );
-
-    @return $result;
-}
+@forward "@progress/kendo-theme-core/scss/color-system/functions.import.scss" with (
+    $kendo-palettes: $kendo-fluent-palettes
+)

package/scss/core/helpers/_index.scss

@@ -1,12 +1,8 @@
 @use "./asp-fallback";
 @use "./animations";
-@use "./base";
 @use "./extra";
 @use "./reset";
 @use "./normalize";
-@use "./layout";
-@use "./loading";
 @use "./resizing";
-@use "./selection";
 @use "./spacer";
 @use "./scrollbar";

package/scss/dataviz/_layout.scss

@@ -400,10 +400,10 @@
         selected-background: $kendo-selected-bg,
         selected-text-color: $kendo-selected-text,
 
-        success: get-theme-color( success, 100 ),
-        info: get-theme-color( info, 100 ),
-        warning: get-theme-color( warning, 100 ),
-        error: get-theme-color( error, 100 ),
+        success: k-get-theme-color( success, 100 ),
+        info: k-get-theme-color( info, 100 ),
+        warning: k-get-theme-color( warning, 100 ),
+        error: k-get-theme-color( error, 100 ),
 
         series-a: $kendo-series-a,
         series-b: $kendo-series-b,
@@ -444,7 +444,7 @@
         series-30: $kendo-series-30,
 
         gauge-pointer: $kendo-series-f,
-        gauge-track: get-theme-color-var( neutral-30 )
+        gauge-track: k-get-theme-color-var( neutral-30 )
     );
 
     @each $name, $value in $exported {