@progress/kendo-theme-bootstrap 7.1.0-dev.1 → 7.1.0-dev.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/dist/all.css +376 -43
  2. package/dist/all.scss +2007 -698
  3. package/dist/meta/sassdoc-data.json +2563 -1265
  4. package/dist/meta/sassdoc-raw-data.json +1100 -502
  5. package/dist/meta/variables.json +483 -331
  6. package/lib/swatches/bootstrap-3-dark.json +1 -1
  7. package/lib/swatches/bootstrap-3.json +1 -1
  8. package/lib/swatches/bootstrap-4-dark.json +1 -1
  9. package/lib/swatches/bootstrap-4.json +1 -1
  10. package/lib/swatches/bootstrap-dataviz-v4.json +1 -1
  11. package/lib/swatches/bootstrap-main-dark.json +1 -1
  12. package/lib/swatches/bootstrap-main.json +1 -1
  13. package/lib/swatches/bootstrap-nordic.json +1 -1
  14. package/lib/swatches/bootstrap-turquoise-dark.json +1 -1
  15. package/lib/swatches/bootstrap-turquoise.json +1 -1
  16. package/lib/swatches/bootstrap-urban.json +1 -1
  17. package/lib/swatches/bootstrap-vintage.json +1 -1
  18. package/package.json +6 -6
  19. package/scss/_bootstrap-overrides.scss +0 -22
  20. package/scss/_variables.scss +0 -198
  21. package/scss/adaptive/_variables.scss +1 -1
  22. package/scss/all.scss +0 -1
  23. package/scss/appbar/_variables.scss +2 -2
  24. package/scss/breadcrumb/_variables.scss +1 -1
  25. package/scss/button/_variables.scss +13 -13
  26. package/scss/calendar/_variables.scss +1 -1
  27. package/scss/chat/_variables.scss +1 -1
  28. package/scss/checkbox/_variables.scss +4 -4
  29. package/scss/chip/_theme.scss +5 -4
  30. package/scss/chip/_variables.scss +1 -1
  31. package/scss/core/_index.scss +6 -0
  32. package/scss/core/color-system/_palettes.scss +171 -0
  33. package/scss/core/color-system/_swatch-legacy.scss +66 -0
  34. package/scss/core/color-system/_swatch.scss +391 -0
  35. package/scss/dataviz/_variables.scss +42 -42
  36. package/scss/dock-manager/_variables.scss +1 -1
  37. package/scss/drawer/_variables.scss +1 -1
  38. package/scss/dropzone/_variables.scss +2 -2
  39. package/scss/editor/_variables.scss +1 -1
  40. package/scss/fab/_theme.scss +21 -21
  41. package/scss/filemanager/_variables.scss +2 -2
  42. package/scss/filter/_variables.scss +1 -1
  43. package/scss/gantt/_variables.scss +13 -13
  44. package/scss/grid/_theme.scss +54 -6
  45. package/scss/grid/_variables.scss +12 -9
  46. package/scss/index.scss +2 -0
  47. package/scss/input/_variables.scss +19 -5
  48. package/scss/list/_variables.scss +1 -1
  49. package/scss/listview/_variables.scss +2 -2
  50. package/scss/map/_variables.scss +1 -1
  51. package/scss/mediaplayer/_variables.scss +1 -1
  52. package/scss/menu/_variables.scss +6 -6
  53. package/scss/notification/_variables.scss +3 -3
  54. package/scss/pager/_variables.scss +1 -1
  55. package/scss/panelbar/_variables.scss +4 -4
  56. package/scss/pivotgrid/_variables.scss +5 -5
  57. package/scss/prompt/_index.scss +37 -0
  58. package/scss/prompt/_layout.scss +6 -0
  59. package/scss/prompt/_theme.scss +6 -0
  60. package/scss/prompt/_variables.scss +66 -0
  61. package/scss/scheduler/_variables.scss +3 -3
  62. package/scss/signature/_variables.scss +1 -1
  63. package/scss/skeleton/_variables.scss +1 -1
  64. package/scss/slider/_variables.scss +8 -8
  65. package/scss/splitter/_variables.scss +1 -1
  66. package/scss/spreadsheet/_variables.scss +4 -4
  67. package/scss/stepper/_variables.scss +7 -7
  68. package/scss/switch/_variables.scss +6 -6
  69. package/scss/table/_variables.scss +3 -3
  70. package/scss/taskboard/_variables.scss +8 -8
  71. package/scss/timeline/_variables.scss +4 -4
  72. package/scss/toolbar/_variables.scss +1 -1
  73. package/scss/tooltip/_variables.scss +4 -4
  74. package/scss/treeview/_variables.scss +1 -1
  75. package/scss/upload/_variables.scss +1 -1
package/dist/all.scss CHANGED
@@ -5,9 +5,8 @@
5
5
  // #region @import "./core/_index.scss"; -> scss/core/_index.scss
6
6
  $wcag-min-contrast-ratio: 4.5 !default;
7
7
 
8
- // Variables
9
- // #region @import "../_variables.scss"; -> scss/_variables.scss
10
- // #region @import "./core/functions/index.import.scss"; -> scss/core/functions/index.import.scss
8
+ // Color System
9
+ // #region @import "./color-system/_swatch.scss"; -> scss/core/color-system/_swatch.scss
11
10
  // #region @import "@progress/kendo-theme-core/scss/functions/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/index.import.scss
12
11
  // #region @import "./_color.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/_color.import.scss
13
12
  /// Returns the alpha channel of a color.
@@ -712,6 +711,28 @@ $kendo-color-level-step: 8% !default;
712
711
  @return k-color-mix( rgba( $color1, 1 ), rgba( $color2, 1 ), $weight );
713
712
  }
714
713
 
714
+ /// Generates all color variations of a given main color
715
+ /// @param {String} $name - The name of the main color
716
+ /// @param {Color} $level - The color value to be assigned to the main color
717
+ /// @return {Map} - A map with the generated keys and values
718
+ ///
719
+ /// @group color-system
720
+ @function k-generate-colors( $name, $color ) {
721
+ $_variations: (
722
+ #{$name}-subtle: k-try-tint( $color, 80% ),
723
+ #{$name}-subtle-hover: k-try-tint( $color, 65% ),
724
+ #{$name}-subtle-active: k-try-tint( $color, 50% ),
725
+ #{$name}: $color,
726
+ #{$name}-hover: k-try-shade( $color, 0.5 ),
727
+ #{$name}-active: k-try-shade( $color, 1.5 ),
728
+ #{$name}-emphasis: k-try-tint( $color, 4.5 ),
729
+ #{$name}-on-subtle: k-try-shade( $color, 8 ),
730
+ on-#{$name}: k-contrast-legacy( $color ),
731
+ #{$name}-on-surface: $color,
732
+ );
733
+
734
+ @return $_variations;
735
+ }
715
736
  // #endregion
716
737
  // #region @import "./_custom-properties.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/_custom-properties.import.scss
717
738
  @function k-var( $prefix: kendo-, $var: null, $fallback: null ) {
@@ -1728,31 +1749,56 @@ $svg-escaped-characters: (
1728
1749
  // #endregion
1729
1750
 
1730
1751
  // #endregion
1752
+ // #region @import "@progress/kendo-theme-core/scss/color-system/_constants.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_constants.scss
1753
+ // Color constants
1731
1754
 
1732
- // #endregion
1733
- // #region @import "./_bootstrap-overrides.scss"; -> scss/_bootstrap-overrides.scss
1734
- $kendo-is-dark-theme: false !default;
1755
+ /// The color white.
1756
+ /// Note: you cannot change this value.
1757
+ /// @type Color
1758
+ /// @group color-system
1759
+ $kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-default
1735
1760
 
1736
- $gray-100: #f8f9fa !default;
1737
- $gray-200: #e9ecef !default;
1738
- $gray-300: #dee2e6 !default;
1739
- $gray-400: #ced4da !default;
1740
- $gray-500: #adb5bd !default;
1741
- $gray-600: #6c757d !default;
1742
- $gray-700: #495057 !default;
1743
- $gray-800: #343a40 !default;
1744
- $gray-900: #212529 !default;
1761
+ /// The color black.
1762
+ /// Note: you cannot change this value.
1763
+ /// @type Color
1764
+ /// @group color-system
1765
+ $kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-default
1745
1766
 
1746
- $kendo-body-bg: #ffffff !default;
1767
+ /// The color transparent.
1768
+ /// Note: you cannot change this value.
1769
+ /// @type Color
1770
+ /// @group color-system
1771
+ $kendo-color-rgba-transparent: rgba(0, 0, 0, 0); // stylelint-disable-line scss/dollar-variable-default
1747
1772
 
1748
- $kendo-component-bg: $kendo-body-bg !default;
1749
- $kendo-component-text: k-contrast-color( $kendo-component-bg, $gray-900, $gray-100 ) !default;
1750
- $kendo-component-border: if( k-is-light( $kendo-component-bg ), $gray-300, $gray-700 ) !default;
1773
+ /// A gradient that goes from transparent to black.
1774
+ /// Note: you cannot change this value.
1775
+ /// @type Gradient
1776
+ /// @group color-system
1777
+ $kendo-gradient-transparent-to-black: rgba(black, 0), black; // stylelint-disable-line scss/dollar-variable-default
1751
1778
 
1752
- $input-bg: $kendo-component-bg !default;
1753
- $input-color: k-contrast-color( $input-bg, $gray-900, $gray-300 ) !default;
1754
- $input-border-color: if( k-is-light( $input-bg ), $gray-400, $gray-600 ) !default;
1755
- $input-placeholder-color: k-contrast-color( $input-bg, $gray-600, $gray-400 ) !default;
1779
+ /// A gradient that goes from transparent to white.
1780
+ /// Note: you cannot change this value.
1781
+ /// @type Gradient
1782
+ /// @group color-system
1783
+ $kendo-gradient-transparent-to-white: rgba(white, 0), white; // stylelint-disable-line scss/dollar-variable-default
1784
+
1785
+ /// A gradient that goes from black to transparent.
1786
+ /// Note: you cannot change this value.
1787
+ /// @type Gradient
1788
+ /// @group color-system
1789
+ $kendo-gradient-black-to-transparent: black, rgba(black, 0); // stylelint-disable-line scss/dollar-variable-default
1790
+
1791
+ /// A gradient that goes from white to transparent.
1792
+ /// Note: you cannot change this value.
1793
+ /// @type Gradient
1794
+ /// @group color-system
1795
+ $kendo-gradient-white-to-transparent: white, rgba(white, 0); // stylelint-disable-line scss/dollar-variable-default
1796
+
1797
+ /// A gradient that cycles through the colors of the rainbow.
1798
+ /// Note: you cannot change this value.
1799
+ /// @type Gradient
1800
+ /// @group color-system
1801
+ $kendo-gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default
1756
1802
 
1757
1803
  // #endregion
1758
1804
  // #region @import "bootstrap/scss/_functions.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/bootstrap/scss/_functions.scss
@@ -3697,121 +3743,382 @@ $nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, remo
3697
3743
  $pre-color: null !default;
3698
3744
 
3699
3745
  // #endregion
3746
+ // #region @import "./_palettes.scss"; -> scss/core/color-system/_palettes.scss
3747
+ $_default-palette-gray: (
3748
+ white: #ffffff,
3749
+ 1: #f8f9fa,
3750
+ 2: #e9ecef,
3751
+ 3: #dee2e6,
3752
+ 4: #ced4da,
3753
+ 5: #bdc4cb,
3754
+ 6: #adb5bd,
3755
+ 7: #8d959d,
3756
+ 8: #6c757d,
3757
+ 9: #606970,
3758
+ 10: #555c64,
3759
+ 11: #495057,
3760
+ 12: #343a40,
3761
+ 13: #2c3035,
3762
+ 14: #212529,
3763
+ 15: #121417,
3764
+ black: #000000,
3765
+ );
3700
3766
 
3701
- /// The color white.
3702
- /// Note: you cannot change this value.
3703
- /// @type Color
3704
- /// @group color-system
3705
- $kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-default
3767
+ $_default-palette-blue: (
3768
+ 1: #ecf4ff,
3769
+ 2: #cfe2ff,
3770
+ 3: #b6d4fe,
3771
+ 4: #9ec5fe,
3772
+ 5: #86b6fe,
3773
+ 6: #6ea8fe,
3774
+ 7: #4992fd,
3775
+ 8: #207afd,
3776
+ 9: #0d6efd,
3777
+ 10: #0b5ed7,
3778
+ 11: #0a58ca,
3779
+ 12: #0a53be,
3780
+ 13: #084298,
3781
+ 14: #052c65,
3782
+ 15: #031633,
3783
+ );
3706
3784
 
3707
- /// The color black.
3708
- /// Note: you cannot change this value.
3709
- /// @type Color
3710
- /// @group color-system
3711
- $kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-default
3785
+ $_default-palette-yellow: (
3786
+ 1: #fff9e6,
3787
+ 2: #fff3cd,
3788
+ 3: #ffecb5,
3789
+ 4: #ffe69c,
3790
+ 5: #ffe083,
3791
+ 6: #ffda6a,
3792
+ 7: #ffcd39,
3793
+ 8: #ffc107,
3794
+ 9: #cc9a06,
3795
+ 10: #b38705,
3796
+ 11: #997404,
3797
+ 12: #806104,
3798
+ 13: #664d03,
3799
+ 14: #523e02,
3800
+ 15: #332701,
3801
+ );
3712
3802
 
3713
- // Options
3714
- $kendo-enable-rounded: true !default;
3715
- $kendo-enable-shadows: true !default;
3716
- $kendo-enable-gradients: true !default;
3717
- $kendo-enable-transitions: true !default;
3718
- $kendo-enable-focus-contrast: false !default;
3719
- $kendo-enable-typography: false !default;
3803
+ $_default-palette-red: (
3804
+ 1: #fcebec,
3805
+ 2: #fae1e3,
3806
+ 3: #f8d7da,
3807
+ 4: #f5c2c7,
3808
+ 5: #f1aeb5,
3809
+ 6: #ea868f,
3810
+ 7: #e35d6a,
3811
+ 8: #dc3545,
3812
+ 9: #b02a37,
3813
+ 10: #9a2530,
3814
+ 11: #842029,
3815
+ 12: #6e1b23,
3816
+ 13: #58151c,
3817
+ 14: #421015,
3818
+ 15: #21080a,
3819
+ );
3720
3820
 
3721
- $kendo-use-input-button-width: false !default;
3722
- $kendo-use-input-spinner-width: false !default;
3723
- $kendo-use-input-spinner-icon-offset: false !default;
3821
+ $_default-palette-cyan: (
3822
+ 1: #e7fafe,
3823
+ 2: #cff4fc,
3824
+ 3: #aaecfa,
3825
+ 4: #9eeaf9,
3826
+ 5: #86e5f8,
3827
+ 6: #6edff6,
3828
+ 7: #3dd5f3,
3829
+ 8: #0dcaf0,
3830
+ 9: #0aa2c0,
3831
+ 10: #098da8,
3832
+ 11: #087990,
3833
+ 12: #076578,
3834
+ 13: #055160,
3835
+ 14: #04414d,
3836
+ 15: #032830,
3837
+ );
3724
3838
 
3725
- $kendo-auto-bootstrap: true !default;
3839
+ $_default-palette-green: (
3840
+ 1: #e8f3ee,
3841
+ 2: #d1e7dd,
3842
+ 3: #badbcc,
3843
+ 4: #a3cfbb,
3844
+ 5: #8cc3aa,
3845
+ 6: #75b798,
3846
+ 7: #479f76,
3847
+ 8: #198754,
3848
+ 9: #146c43,
3849
+ 10: #125f3b,
3850
+ 11: #0f5132,
3851
+ 12: #0d442a,
3852
+ 13: #0a3622,
3853
+ 14: #08291a,
3854
+ 15: #051b11,
3855
+ );
3726
3856
 
3857
+ $_default-palette-indigo: (
3858
+ 1: #f0e7fe,
3859
+ 2: #e2d9f3,
3860
+ 3: #d3c5ec,
3861
+ 4: #c5b3e6,
3862
+ 5: #b9a3e1,
3863
+ 6: #a98eda,
3864
+ 7: #8c68cd,
3865
+ 8: #6f42c1,
3866
+ 9: #59359a,
3867
+ 10: #4e2f89,
3868
+ 11: #432874,
3869
+ 12: #36215f,
3870
+ 13: #2c1a4d,
3871
+ 14: #21143b,
3872
+ 15: #160d27,
3873
+ );
3727
3874
 
3728
- // Spacing
3729
- $kendo-spacing: (
3730
- 0: 0,
3731
- 1px: 1px,
3732
- 0.5: .125rem,
3733
- 1: .25rem,
3734
- 1.5: .375rem,
3735
- 2: .5rem,
3736
- 2.5: .625rem,
3737
- 3: .75rem,
3738
- 3.5: .875rem,
3739
- 4: 1rem,
3740
- 4.5: 1.125rem,
3741
- 5: 1.25rem,
3742
- 5.5: 1.375rem,
3743
- 6: 1.5rem,
3744
- 6.5: 1.625rem,
3745
- 7: 1.75rem,
3746
- 7.5: 1.875rem,
3747
- 8: 2rem,
3748
- 9: 2.25rem,
3749
- 10: 2.5rem,
3750
- 11: 2.75rem,
3751
- 12: 3rem,
3752
- 13: 3.25rem,
3753
- 14: 3.5rem,
3754
- 15: 3.75rem,
3755
- 16: 4rem,
3756
- 17: 4.25rem,
3757
- 18: 4.5rem,
3758
- 19: 4.75rem,
3759
- 20: 5rem,
3760
- 21: 5.25rem,
3761
- 22: 5.5rem,
3762
- 23: 5.75rem,
3763
- 24: 6rem
3764
- ) !default;
3875
+ $_default-palette-teal: (
3876
+ 1: #ebfaf6,
3877
+ 2: #e8dbfd,
3878
+ 3: #d2f4ea,
3879
+ 4: #c1f0e2,
3880
+ 5: #a6e9d5,
3881
+ 6: #79dfc1,
3882
+ 7: #4dd4ac,
3883
+ 8: #20c997,
3884
+ 9: #1aa179,
3885
+ 10: #178c69,
3886
+ 11: #13795b,
3887
+ 12: #10654c,
3888
+ 13: #0d503c,
3889
+ 14: #0a3e2e,
3890
+ 15: #06281e,
3891
+ );
3765
3892
 
3893
+ // stylelint-disable scss/no-global-function-names
3894
+ $kendo-palette-gray: $_default-palette-gray !default;
3895
+ $kendo-palette-gray: map-merge($_default-palette-gray, $kendo-palette-gray);
3766
3896
 
3767
- // Icons
3768
- $kendo-icon-size: 16px !default;
3897
+ $kendo-palette-blue: $_default-palette-blue !default;
3898
+ $kendo-palette-blue: map-merge($_default-palette-blue, $kendo-palette-blue);
3769
3899
 
3770
- $kendo-icon-size-xs: calc( #{$kendo-icon-size} * .75 ) !default;
3771
- $kendo-icon-size-sm: calc( #{$kendo-icon-size} * .875 ) !default;
3772
- $kendo-icon-size-md: $kendo-icon-size !default;
3773
- $kendo-icon-size-lg: calc( #{$kendo-icon-size} * 1.25 ) !default;
3774
- $kendo-icon-size-xl: calc( #{$kendo-icon-size} * 1.5 ) !default;
3775
- $kendo-icon-size-xxl: calc( #{$kendo-icon-size} * 2 ) !default;
3776
- $kendo-icon-size-xxxl: calc( #{$kendo-icon-size} * 3 ) !default;
3900
+ $kendo-palette-yellow: $_default-palette-yellow !default;
3901
+ $kendo-palette-yellow: map-merge($_default-palette-yellow, $kendo-palette-yellow);
3777
3902
 
3778
- $kendo-icon-spacing: k-map-get( $kendo-spacing, 2 ) !default;
3779
- $kendo-icon-padding: k-map-get( $kendo-spacing, 1 ) !default;
3903
+ $kendo-palette-red: $_default-palette-red !default;
3904
+ $kendo-palette-red: map-merge($_default-palette-red, $kendo-palette-red);
3780
3905
 
3781
- // Metrics
3782
- $kendo-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
3783
- $kendo-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
3784
- $kendo-padding-sm-x: k-map-get( $kendo-spacing, 2 ) !default;
3785
- $kendo-padding-sm-y: k-map-get( $kendo-spacing, 1 ) !default;
3786
- $kendo-padding-md-x: k-map-get( $kendo-spacing, 4 ) !default;
3787
- $kendo-padding-md-y: k-map-get( $kendo-spacing, 2 ) !default;
3788
- $kendo-padding-lg-x: k-map-get( $kendo-spacing, 6 ) !default;
3789
- $kendo-padding-lg-y: k-map-get( $kendo-spacing, 3 ) !default;
3906
+ $kendo-palette-cyan: $_default-palette-cyan !default;
3907
+ $kendo-palette-cyan: map-merge($_default-palette-cyan, $kendo-palette-cyan);
3790
3908
 
3791
- /// Border radius for all components.
3792
- $kendo-border-radius: $border-radius !default;
3793
- $kendo-border-radius-sm: $border-radius-sm !default;
3794
- $kendo-border-radius-md: $kendo-border-radius !default;
3795
- $kendo-border-radius-lg: $border-radius-lg !default;
3909
+ $kendo-palette-green: $_default-palette-green !default;
3910
+ $kendo-palette-green: map-merge($_default-palette-green, $kendo-palette-green);
3796
3911
 
3797
- $kendo-border-radii: (
3798
- DEFAULT: $kendo-border-radius-md,
3799
- 0: 0,
3800
- sm: $kendo-border-radius-sm,
3801
- md: $kendo-border-radius-md,
3802
- lg: $kendo-border-radius-lg,
3803
- full: 9999px
3804
- ) !default;
3912
+ $kendo-palette-indigo: $_default-palette-indigo !default;
3913
+ $kendo-palette-indigo: map-merge($_default-palette-indigo, $kendo-palette-indigo);
3805
3914
 
3915
+ $kendo-palette-teal: $_default-palette-teal !default;
3916
+ $kendo-palette-teal: map-merge($_default-palette-teal, $kendo-palette-teal);
3917
+ // stylelint-enable scss/no-global-function-names
3918
+ // #endregion
3806
3919
 
3807
- $kendo-zindex-popup: 1 !default;
3808
- $kendo-zindex-window: 2 !default;
3809
- $kendo-zindex-loading: 100 !default;
3920
+ // Config
3921
+ $kendo-enable-color-system: false !default;
3922
+
3923
+ // Colors
3924
+ $_default-colors: (
3925
+ // Misc
3926
+ app-surface: k-map-get( $kendo-palette-gray, white ),
3927
+ on-app-surface: k-map-get( $kendo-palette-gray, 14 ),
3928
+ subtle: k-map-get( $kendo-palette-gray, 9 ),
3929
+ surface: k-map-get( $kendo-palette-gray, 1 ),
3930
+ surface-alt: k-map-get( $kendo-palette-gray, white ),
3931
+ border: k-map-get( $kendo-palette-gray, 3 ),
3932
+ border-alt: k-map-get( $kendo-palette-gray, 4 ),
3933
+ // Base
3934
+ base-subtle: k-map-get( $kendo-palette-gray, 2 ),
3935
+ base-subtle-hover: k-map-get( $kendo-palette-gray, 3 ),
3936
+ base-subtle-active: k-map-get( $kendo-palette-gray, 4 ),
3937
+ base: k-map-get( $kendo-palette-gray, 3 ),
3938
+ base-hover: k-map-get( $kendo-palette-gray, 4 ),
3939
+ base-active: k-map-get( $kendo-palette-gray, 5 ),
3940
+ base-emphasis: k-map-get( $kendo-palette-gray, 6 ),
3941
+ base-on-subtle: k-map-get( $kendo-palette-gray, 14 ),
3942
+ on-base: k-map-get( $kendo-palette-gray, 14 ),
3943
+ base-on-surface: k-map-get( $kendo-palette-gray, 14 ),
3944
+ // Primary
3945
+ primary-subtle: k-map-get( $kendo-palette-blue, 2 ),
3946
+ primary-subtle-hover: k-map-get( $kendo-palette-blue, 3 ),
3947
+ primary-subtle-active: k-map-get( $kendo-palette-blue, 4 ),
3948
+ primary: k-map-get( $kendo-palette-blue, 9 ),
3949
+ primary-hover: k-map-get( $kendo-palette-blue, 10 ),
3950
+ primary-active: k-map-get( $kendo-palette-blue, 11 ),
3951
+ primary-emphasis: k-map-get( $kendo-palette-blue, 6 ),
3952
+ primary-on-subtle: k-map-get( $kendo-palette-blue, 14 ),
3953
+ on-primary: k-map-get( $kendo-palette-gray, white ),
3954
+ primary-on-surface: k-map-get( $kendo-palette-blue, 9 ),
3955
+ // Secondary
3956
+ secondary-subtle: k-map-get( $kendo-palette-gray, 3 ),
3957
+ secondary-subtle-hover: k-map-get( $kendo-palette-gray, 4 ),
3958
+ secondary-subtle-active: k-map-get( $kendo-palette-gray, 5 ),
3959
+ secondary: k-map-get( $kendo-palette-gray, 8 ),
3960
+ secondary-hover: k-map-get( $kendo-palette-gray, 9 ),
3961
+ secondary-active: k-map-get( $kendo-palette-gray, 10 ),
3962
+ secondary-emphasis: k-map-get( $kendo-palette-gray, 7 ),
3963
+ secondary-on-subtle: k-map-get( $kendo-palette-gray, 14 ),
3964
+ on-secondary: k-map-get( $kendo-palette-gray, white ),
3965
+ secondary-on-surface: k-map-get( $kendo-palette-gray, 14 ),
3966
+ // Tertiary
3967
+ tertiary-subtle: k-map-get( $kendo-palette-indigo, 2 ),
3968
+ tertiary-subtle-hover: k-map-get( $kendo-palette-indigo, 3 ),
3969
+ tertiary-subtle-active: k-map-get( $kendo-palette-indigo, 4 ),
3970
+ tertiary: k-map-get( $kendo-palette-indigo, 8 ),
3971
+ tertiary-hover: k-map-get( $kendo-palette-indigo, 9 ),
3972
+ tertiary-active: k-map-get( $kendo-palette-indigo, 10 ),
3973
+ tertiary-emphasis: k-map-get( $kendo-palette-indigo, 6 ),
3974
+ tertiary-on-subtle: k-map-get( $kendo-palette-indigo, 14 ),
3975
+ on-tertiary: k-map-get( $kendo-palette-gray, white ),
3976
+ tertiary-on-surface: k-map-get( $kendo-palette-indigo, 8 ),
3977
+ // Info
3978
+ info-subtle: k-map-get( $kendo-palette-cyan, 2 ),
3979
+ info-subtle-hover: k-map-get( $kendo-palette-cyan, 3 ),
3980
+ info-subtle-active: k-map-get( $kendo-palette-cyan, 5 ),
3981
+ info: k-map-get( $kendo-palette-cyan, 8 ),
3982
+ info-hover: k-map-get( $kendo-palette-cyan, 9 ),
3983
+ info-active: k-map-get( $kendo-palette-cyan, 10 ),
3984
+ info-emphasis: k-map-get( $kendo-palette-cyan, 7 ),
3985
+ info-on-subtle: k-map-get( $kendo-palette-cyan, 14 ),
3986
+ on-info: k-map-get( $kendo-palette-gray, white ),
3987
+ info-on-surface: k-map-get( $kendo-palette-cyan, 8 ),
3988
+ // Success
3989
+ success-subtle: k-map-get( $kendo-palette-green, 2 ),
3990
+ success-subtle-hover: k-map-get( $kendo-palette-green, 3 ),
3991
+ success-subtle-active: k-map-get( $kendo-palette-green, 5 ),
3992
+ success: k-map-get( $kendo-palette-green, 9 ),
3993
+ success-hover: k-map-get( $kendo-palette-green, 10 ),
3994
+ success-active: k-map-get( $kendo-palette-green, 11 ),
3995
+ success-emphasis: k-map-get( $kendo-palette-green, 7 ),
3996
+ success-on-subtle: k-map-get( $kendo-palette-green, 14 ),
3997
+ on-success: k-map-get( $kendo-palette-gray, white ),
3998
+ success-on-surface: k-map-get( $kendo-palette-green, 11 ),
3999
+ // Warning
4000
+ warning-subtle: k-map-get( $kendo-palette-yellow, 3 ),
4001
+ warning-subtle-hover: k-map-get( $kendo-palette-yellow, 4 ),
4002
+ warning-subtle-active: k-map-get( $kendo-palette-yellow, 5 ),
4003
+ warning: k-map-get( $kendo-palette-yellow, 8 ),
4004
+ warning-hover: k-map-get( $kendo-palette-yellow, 9 ),
4005
+ warning-active: k-map-get( $kendo-palette-yellow, 10 ),
4006
+ warning-emphasis: k-map-get( $kendo-palette-yellow, 7 ),
4007
+ warning-on-subtle: k-map-get( $kendo-palette-yellow, 14 ),
4008
+ on-warning: k-map-get( $kendo-palette-gray, black ),
4009
+ warning-on-surface: k-map-get( $kendo-palette-yellow, 8 ),
4010
+ // Error
4011
+ error-subtle: k-map-get( $kendo-palette-red, 3 ),
4012
+ error-subtle-hover: k-map-get( $kendo-palette-red, 4 ),
4013
+ error-subtle-active: k-map-get( $kendo-palette-red, 5 ),
4014
+ error: k-map-get( $kendo-palette-red, 8 ),
4015
+ error-hover: k-map-get( $kendo-palette-red, 9 ),
4016
+ error-active: k-map-get( $kendo-palette-red, 10 ),
4017
+ error-emphasis: k-map-get( $kendo-palette-red, 7 ),
4018
+ error-on-subtle: k-map-get( $kendo-palette-red, 14 ),
4019
+ on-error: k-map-get( $kendo-palette-gray, white ),
4020
+ error-on-surface: k-map-get( $kendo-palette-red, 8 ),
4021
+ // Light
4022
+ light-subtle: k-map-get( $kendo-palette-gray, 1 ),
4023
+ light-subtle-hover: k-map-get( $kendo-palette-gray, 2 ),
4024
+ light-subtle-active: k-map-get( $kendo-palette-gray, 3 ),
4025
+ light: k-map-get( $kendo-palette-gray, 1 ),
4026
+ light-hover: k-map-get( $kendo-palette-gray, 2 ),
4027
+ light-active: k-map-get( $kendo-palette-gray, 3 ),
4028
+ light-emphasis: k-map-get( $kendo-palette-gray, 5 ),
4029
+ light-on-subtle: k-map-get( $kendo-palette-gray, 12 ),
4030
+ on-light: k-map-get( $kendo-palette-gray, black ),
4031
+ light-on-surface: k-map-get( $kendo-palette-gray, 4 ),
4032
+ // Dark
4033
+ dark-subtle: k-map-get( $kendo-palette-gray, 8 ),
4034
+ dark-subtle-hover: k-map-get( $kendo-palette-gray, 9 ),
4035
+ dark-subtle-active: k-map-get( $kendo-palette-gray, 10 ),
4036
+ dark: k-map-get( $kendo-palette-gray, 14 ),
4037
+ dark-hover: k-map-get( $kendo-palette-gray, 13 ),
4038
+ dark-active: k-map-get( $kendo-palette-gray, 12 ),
4039
+ dark-emphasis: k-map-get( $kendo-palette-gray, 12 ),
4040
+ dark-on-subtle: k-map-get( $kendo-palette-gray, white ),
4041
+ on-dark: k-map-get( $kendo-palette-gray, white ),
4042
+ dark-on-surface: k-map-get( $kendo-palette-gray, 15 ),
4043
+ // Inverse
4044
+ inverse-subtle: k-map-get( $kendo-palette-gray, 8 ),
4045
+ inverse-subtle-hover: k-map-get( $kendo-palette-gray, 9 ),
4046
+ inverse-subtle-active: k-map-get( $kendo-palette-gray, 10 ),
4047
+ inverse: k-map-get( $kendo-palette-gray, 14 ),
4048
+ inverse-hover: k-map-get( $kendo-palette-gray, 13 ),
4049
+ inverse-active: k-map-get( $kendo-palette-gray, 12 ),
4050
+ inverse-emphasis: k-map-get( $kendo-palette-gray, 12 ),
4051
+ inverse-on-subtle: k-map-get( $kendo-palette-gray, white ),
4052
+ on-inverse: k-map-get( $kendo-palette-gray, white ),
4053
+ inverse-on-surface: k-map-get( $kendo-palette-gray, 15 ),
4054
+ // Series A
4055
+ series-a: k-map-get( $kendo-palette-blue, 9 ),
4056
+ series-a-bold: k-map-get( $kendo-palette-blue, 12 ),
4057
+ series-a-bolder: k-map-get( $kendo-palette-blue, 14 ),
4058
+ series-a-subtle: k-map-get( $kendo-palette-blue, 5 ),
4059
+ series-a-subtler: k-map-get( $kendo-palette-blue, 7 ),
4060
+ // Series B
4061
+ series-b: k-map-get( $kendo-palette-indigo, 8 ),
4062
+ series-b-bold: k-map-get( $kendo-palette-indigo, 10 ),
4063
+ series-b-bolder: k-map-get( $kendo-palette-indigo, 12 ),
4064
+ series-b-subtle: k-map-get( $kendo-palette-indigo, 5 ),
4065
+ series-b-subtler: k-map-get( $kendo-palette-indigo, 7 ),
4066
+ // Series C
4067
+ series-c: k-map-get( $kendo-palette-teal, 8 ),
4068
+ series-c-bold: k-map-get( $kendo-palette-teal, 10 ),
4069
+ series-c-bolder: k-map-get( $kendo-palette-teal, 12 ),
4070
+ series-c-subtle: k-map-get( $kendo-palette-teal, 5 ),
4071
+ series-c-subtler: k-map-get( $kendo-palette-teal, 7 ),
4072
+ // Series D
4073
+ series-d: k-map-get( $kendo-palette-green, 8 ),
4074
+ series-d-bold: k-map-get( $kendo-palette-green, 10 ),
4075
+ series-d-bolder: k-map-get( $kendo-palette-green, 12 ),
4076
+ series-d-subtle: k-map-get( $kendo-palette-green, 5 ),
4077
+ series-d-subtler: k-map-get( $kendo-palette-green, 7 ),
4078
+ // Series Е
4079
+ series-e: k-map-get( $kendo-palette-red, 8 ),
4080
+ series-e-bold: k-map-get( $kendo-palette-red, 10 ),
4081
+ series-e-bolder: k-map-get( $kendo-palette-red, 12 ),
4082
+ series-e-subtle: k-map-get( $kendo-palette-red, 5 ),
4083
+ series-e-subtler: k-map-get( $kendo-palette-red, 7 ),
4084
+ // Series F
4085
+ series-f: k-map-get( $kendo-palette-yellow, 8 ),
4086
+ series-f-bold: k-map-get( $kendo-palette-yellow, 10 ),
4087
+ series-f-bolder: k-map-get( $kendo-palette-yellow, 12 ),
4088
+ series-f-subtle: k-map-get( $kendo-palette-yellow, 5 ),
4089
+ series-f-subtler: k-map-get( $kendo-palette-yellow, 7 ),
4090
+ ) !default;
3810
4091
 
4092
+ /// The global default Colors map.
4093
+ /// @group color-system
4094
+ $kendo-colors: $_default-colors !default;
4095
+
4096
+ // Legacy
3811
4097
 
3812
- // Color settings
3813
4098
  $kendo-is-dark-theme: false !default;
3814
4099
 
4100
+ $gray-100: #f8f9fa !default;
4101
+ $gray-200: #e9ecef !default;
4102
+ $gray-300: #dee2e6 !default;
4103
+ $gray-400: #ced4da !default;
4104
+ $gray-500: #adb5bd !default;
4105
+ $gray-600: #6c757d !default;
4106
+ $gray-700: #495057 !default;
4107
+ $gray-800: #343a40 !default;
4108
+ $gray-900: #212529 !default;
4109
+
4110
+ $kendo-body-bg: #ffffff !default;
4111
+
4112
+ $kendo-component-bg: $kendo-body-bg !default;
4113
+ $kendo-component-text: k-contrast-color( $kendo-component-bg, $gray-900, $gray-100 ) !default;
4114
+ $kendo-component-border: if( k-is-light( $kendo-component-bg ), $gray-300, $gray-700 ) !default;
4115
+
4116
+ $input-bg: $kendo-component-bg !default;
4117
+ $input-color: k-contrast-color( $input-bg, $gray-900, $gray-300 ) !default;
4118
+ $input-border-color: if( k-is-light( $input-bg ), $gray-400, $gray-600 ) !default;
4119
+ $input-placeholder-color: k-contrast-color( $input-bg, $gray-600, $gray-400 ) !default;
4120
+
4121
+
3815
4122
  // Theme colors
3816
4123
  /// The color that focuses the user attention.
3817
4124
  /// Used for primary buttons and for elements of primary importance across the theme.
@@ -3910,57 +4217,6 @@ $kendo-theme-colors: (
3910
4217
  ) !default;
3911
4218
 
3912
4219
 
3913
- // Typography
3914
-
3915
- /// Base font size across all components.
3916
- /// @group typography
3917
- $kendo-font-size: $font-size-base !default;
3918
- $kendo-font-size-xs: ( $kendo-font-size * .75 ) !default;
3919
- $kendo-font-size-sm: $font-size-sm !default;
3920
- $kendo-font-size-md: $kendo-font-size !default;
3921
- $kendo-font-size-lg: $font-size-lg !default;
3922
- $kendo-font-size-xl: ( $kendo-font-size-md * 1.5 ) !default;
3923
-
3924
- $kendo-font-sizes: (
3925
- xs: $kendo-font-size-xs,
3926
- sm: $kendo-font-size-sm,
3927
- md: $kendo-font-size-md,
3928
- lg: $kendo-font-size-lg,
3929
- xl: $kendo-font-size-xl
3930
- ) !default;
3931
-
3932
- /// Font family for text.
3933
- /// @group typography
3934
- $kendo-font-family-sans-serif: $font-family-sans-serif !default;
3935
-
3936
- /// Font family for monospaced text. Used for styling the code.
3937
- /// @group typography
3938
- $kendo-font-family-monospace: $font-family-monospace !default;
3939
-
3940
- /// Font family across all components.
3941
- /// @group typography
3942
- $kendo-font-family: $kendo-font-family-sans-serif !default;
3943
-
3944
- /// Line height used along with $kendo-font-size.
3945
- /// @group typography
3946
- $kendo-line-height: $line-height-base !default;
3947
- $kendo-line-height-xs: 1 !default;
3948
- $kendo-line-height-sm: $line-height-sm !default;
3949
- $kendo-line-height-md: $kendo-line-height !default;
3950
- $kendo-line-height-lg: $line-height-lg !default;
3951
- $kendo-line-height-em: calc( #{$kendo-line-height} * 1em ) !default;
3952
-
3953
- // Font weight
3954
- $kendo-font-weight-light: $font-weight-light !default;
3955
- $kendo-font-weight-normal: $font-weight-normal !default;
3956
- $kendo-font-weight-medium: 500 !default; // TODO: use from bootstrap when we update
3957
- $kendo-font-weight-semibold: 600 !default; // TODO: use from bootstrap when we update
3958
- $kendo-font-weight-bold: $font-weight-bold !default;
3959
-
3960
- // Letter Spacing
3961
- $kendo-letter-spacing: null !default;
3962
-
3963
-
3964
4220
  // Generic styles
3965
4221
 
3966
4222
  // Root styles
@@ -4027,6 +4283,186 @@ $kendo-selected-hover-text: $kendo-selected-text !default;
4027
4283
  $kendo-selected-hover-border: $kendo-base-border !default;
4028
4284
  $kendo-selected-hover-gradient: null !default;
4029
4285
 
4286
+ /// Text color of disabled items.
4287
+ $kendo-disabled-text: if( $kendo-is-dark-theme, $gray-600, $gray-500) !default;
4288
+
4289
+ // Header
4290
+ $kendo-component-header-bg: $kendo-base-bg !default;
4291
+ $kendo-component-header-text: $kendo-component-text !default;
4292
+ $kendo-component-header-border: $kendo-component-border !default;
4293
+ $kendo-component-header-gradient: null !default;
4294
+
4295
+ // Validator
4296
+ $kendo-invalid-bg: null !default;
4297
+ $kendo-invalid-text: $kendo-color-error !default;
4298
+ $kendo-invalid-border: $kendo-color-error !default;
4299
+ $kendo-invalid-shadow: 0 0 0 .25rem rgba( $kendo-invalid-border, .25 ) !default;
4300
+
4301
+ $kendo-valid-bg: null !default;
4302
+ $kendo-valid-text: $kendo-color-success !default;
4303
+ $kendo-valid-border: $kendo-color-success !default;
4304
+ $kendo-valid-shadow: 0 0 0 .25rem rgba( $kendo-valid-border, .25 ) !default;
4305
+
4306
+ // #endregion
4307
+
4308
+ // Variables
4309
+ // #region @import "../_variables.scss"; -> scss/_variables.scss
4310
+ // #region @import "./core/functions/index.import.scss"; -> scss/core/functions/index.import.scss
4311
+ // #region @import "@progress/kendo-theme-core/scss/functions/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/index.import.scss
4312
+ // File already imported_once. Skipping output.
4313
+ // #endregion
4314
+
4315
+ // #endregion
4316
+
4317
+ // Options
4318
+ $kendo-enable-rounded: true !default;
4319
+ $kendo-enable-shadows: true !default;
4320
+ $kendo-enable-gradients: true !default;
4321
+ $kendo-enable-transitions: true !default;
4322
+ $kendo-enable-focus-contrast: false !default;
4323
+ $kendo-enable-typography: false !default;
4324
+
4325
+ $kendo-use-input-button-width: false !default;
4326
+ $kendo-use-input-spinner-width: false !default;
4327
+ $kendo-use-input-spinner-icon-offset: false !default;
4328
+
4329
+ $kendo-auto-bootstrap: true !default;
4330
+
4331
+
4332
+ // Spacing
4333
+ $kendo-spacing: (
4334
+ 0: 0,
4335
+ 1px: 1px,
4336
+ 0.5: .125rem,
4337
+ 1: .25rem,
4338
+ 1.5: .375rem,
4339
+ 2: .5rem,
4340
+ 2.5: .625rem,
4341
+ 3: .75rem,
4342
+ 3.5: .875rem,
4343
+ 4: 1rem,
4344
+ 4.5: 1.125rem,
4345
+ 5: 1.25rem,
4346
+ 5.5: 1.375rem,
4347
+ 6: 1.5rem,
4348
+ 6.5: 1.625rem,
4349
+ 7: 1.75rem,
4350
+ 7.5: 1.875rem,
4351
+ 8: 2rem,
4352
+ 9: 2.25rem,
4353
+ 10: 2.5rem,
4354
+ 11: 2.75rem,
4355
+ 12: 3rem,
4356
+ 13: 3.25rem,
4357
+ 14: 3.5rem,
4358
+ 15: 3.75rem,
4359
+ 16: 4rem,
4360
+ 17: 4.25rem,
4361
+ 18: 4.5rem,
4362
+ 19: 4.75rem,
4363
+ 20: 5rem,
4364
+ 21: 5.25rem,
4365
+ 22: 5.5rem,
4366
+ 23: 5.75rem,
4367
+ 24: 6rem
4368
+ ) !default;
4369
+
4370
+
4371
+ // Icons
4372
+ $kendo-icon-size: 16px !default;
4373
+
4374
+ $kendo-icon-size-xs: calc( #{$kendo-icon-size} * .75 ) !default;
4375
+ $kendo-icon-size-sm: calc( #{$kendo-icon-size} * .875 ) !default;
4376
+ $kendo-icon-size-md: $kendo-icon-size !default;
4377
+ $kendo-icon-size-lg: calc( #{$kendo-icon-size} * 1.25 ) !default;
4378
+ $kendo-icon-size-xl: calc( #{$kendo-icon-size} * 1.5 ) !default;
4379
+ $kendo-icon-size-xxl: calc( #{$kendo-icon-size} * 2 ) !default;
4380
+ $kendo-icon-size-xxxl: calc( #{$kendo-icon-size} * 3 ) !default;
4381
+
4382
+ $kendo-icon-spacing: k-map-get( $kendo-spacing, 2 ) !default;
4383
+ $kendo-icon-padding: k-map-get( $kendo-spacing, 1 ) !default;
4384
+
4385
+ // Metrics
4386
+ $kendo-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
4387
+ $kendo-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
4388
+ $kendo-padding-sm-x: k-map-get( $kendo-spacing, 2 ) !default;
4389
+ $kendo-padding-sm-y: k-map-get( $kendo-spacing, 1 ) !default;
4390
+ $kendo-padding-md-x: k-map-get( $kendo-spacing, 4 ) !default;
4391
+ $kendo-padding-md-y: k-map-get( $kendo-spacing, 2 ) !default;
4392
+ $kendo-padding-lg-x: k-map-get( $kendo-spacing, 6 ) !default;
4393
+ $kendo-padding-lg-y: k-map-get( $kendo-spacing, 3 ) !default;
4394
+
4395
+ /// Border radius for all components.
4396
+ $kendo-border-radius: $border-radius !default;
4397
+ $kendo-border-radius-sm: $border-radius-sm !default;
4398
+ $kendo-border-radius-md: $kendo-border-radius !default;
4399
+ $kendo-border-radius-lg: $border-radius-lg !default;
4400
+
4401
+ $kendo-border-radii: (
4402
+ DEFAULT: $kendo-border-radius-md,
4403
+ 0: 0,
4404
+ sm: $kendo-border-radius-sm,
4405
+ md: $kendo-border-radius-md,
4406
+ lg: $kendo-border-radius-lg,
4407
+ full: 9999px
4408
+ ) !default;
4409
+
4410
+
4411
+ $kendo-zindex-popup: 1 !default;
4412
+ $kendo-zindex-window: 2 !default;
4413
+ $kendo-zindex-loading: 100 !default;
4414
+
4415
+
4416
+ // Typography
4417
+
4418
+ /// Base font size across all components.
4419
+ /// @group typography
4420
+ $kendo-font-size: $font-size-base !default;
4421
+ $kendo-font-size-xs: ( $kendo-font-size * .75 ) !default;
4422
+ $kendo-font-size-sm: $font-size-sm !default;
4423
+ $kendo-font-size-md: $kendo-font-size !default;
4424
+ $kendo-font-size-lg: $font-size-lg !default;
4425
+ $kendo-font-size-xl: ( $kendo-font-size-md * 1.5 ) !default;
4426
+
4427
+ $kendo-font-sizes: (
4428
+ xs: $kendo-font-size-xs,
4429
+ sm: $kendo-font-size-sm,
4430
+ md: $kendo-font-size-md,
4431
+ lg: $kendo-font-size-lg,
4432
+ xl: $kendo-font-size-xl
4433
+ ) !default;
4434
+
4435
+ /// Font family for text.
4436
+ /// @group typography
4437
+ $kendo-font-family-sans-serif: $font-family-sans-serif !default;
4438
+
4439
+ /// Font family for monospaced text. Used for styling the code.
4440
+ /// @group typography
4441
+ $kendo-font-family-monospace: $font-family-monospace !default;
4442
+
4443
+ /// Font family across all components.
4444
+ /// @group typography
4445
+ $kendo-font-family: $kendo-font-family-sans-serif !default;
4446
+
4447
+ /// Line height used along with $kendo-font-size.
4448
+ /// @group typography
4449
+ $kendo-line-height: $line-height-base !default;
4450
+ $kendo-line-height-xs: 1 !default;
4451
+ $kendo-line-height-sm: $line-height-sm !default;
4452
+ $kendo-line-height-md: $kendo-line-height !default;
4453
+ $kendo-line-height-lg: $line-height-lg !default;
4454
+ $kendo-line-height-em: calc( #{$kendo-line-height} * 1em ) !default;
4455
+
4456
+ // Font weight
4457
+ $kendo-font-weight-light: $font-weight-light !default;
4458
+ $kendo-font-weight-normal: $font-weight-normal !default;
4459
+ $kendo-font-weight-medium: 500 !default; // TODO: use from bootstrap when we update
4460
+ $kendo-font-weight-semibold: 600 !default; // TODO: use from bootstrap when we update
4461
+ $kendo-font-weight-bold: $font-weight-bold !default;
4462
+
4463
+ // Letter Spacing
4464
+ $kendo-letter-spacing: null !default;
4465
+
4030
4466
 
4031
4467
  // TODO: refactor
4032
4468
  $kendo-focus-shadow: null !default;
@@ -4035,7 +4471,6 @@ $kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, bord
4035
4471
 
4036
4472
 
4037
4473
  // Disabled mixin variables
4038
- $kendo-disabled-text: if( $kendo-is-dark-theme, $gray-600, $gray-500) !default;
4039
4474
  $kendo-disabled-filter: grayscale(.1) !default;
4040
4475
  $kendo-disabled-opacity: .65 !default;
4041
4476
 
@@ -4049,20 +4484,6 @@ $kendo-disabled-styling: (
4049
4484
 
4050
4485
  // TODO: refactor once we extract drag drop as separate module
4051
4486
 
4052
-
4053
- // Header
4054
- $kendo-component-header-bg: $kendo-base-bg !default;
4055
- $kendo-component-header-text: $kendo-component-text !default;
4056
- $kendo-component-header-border: $kendo-component-border !default;
4057
- $kendo-component-header-gradient: null !default;
4058
-
4059
-
4060
- // Validator
4061
- $kendo-invalid-bg: null !default;
4062
- $kendo-invalid-text: $kendo-color-error !default;
4063
- $kendo-invalid-border: $kendo-color-error !default;
4064
- $kendo-invalid-shadow: 0 0 0 .25rem rgba( $kendo-invalid-border, .25 ) !default;
4065
-
4066
4487
  // Loading
4067
4488
  $kendo-loading-opacity: .3 !default;
4068
4489
  $kendo-zindex-loading: 100 !default;
@@ -5193,6 +5614,31 @@ $kendo-palettes: (
5193
5614
  @return var( --#{$prefix}#{$name}, #{$fallback} );
5194
5615
  }
5195
5616
 
5617
+ @function k-get-swatch-color( $name, $color ) {
5618
+ $map: (
5619
+ app-surface: k-color( app-surface ),
5620
+ on-app-surface: k-color( on-app-surface ),
5621
+ subtle: k-color( subtle ),
5622
+ surface: k-color( surface ),
5623
+ surface-alt: k-color( surface-alt ),
5624
+ border: k-color( border ),
5625
+ border-alt: k-color( border-alt ),
5626
+ color-subtle: k-color( #{$color}-subtle ),
5627
+ color-subtle-hover: k-color( #{$color}-subtle-hover ),
5628
+ color-subtle-active: k-color( #{$color}-subtle-active ),
5629
+ color: k-color( #{$color} ),
5630
+ color-hover: k-color( #{$color}-hover ),
5631
+ color-active: k-color( #{$color}-active ),
5632
+ color-emphasis: k-color( #{$color}-emphasis ),
5633
+ color-on-subtle: k-color( #{$color}-on-subtle ),
5634
+ on-color: k-color( on-#{$color} ),
5635
+ color-on-surface: k-color( #{$color}-on-surface ),
5636
+ on-color-disabled: rgba( k-color( on-#{$color}, true ), .46)
5637
+ );
5638
+
5639
+ @return if( k-map-has-key( $map, $name ), k-map-get( $map, $name ), $name );
5640
+ };
5641
+
5196
5642
  @function k-generate-theme-variation( $theme-color, $source-palette-name, $mapping ) {
5197
5643
  $temp: ( );
5198
5644
 
@@ -5204,9 +5650,9 @@ $kendo-palettes: (
5204
5650
  $border-prop: k-list-nth($indices, 3);
5205
5651
 
5206
5652
  // Take value from the palette only if it is a number
5207
- $bg: if( k-meta-type-of($bg-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$bg-prop} ), $bg-prop );
5208
- $text: if( k-meta-type-of($text-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$text-prop} ), $text-prop );
5209
- $border: if( k-meta-type-of($border-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$border-prop} ), $border-prop );
5653
+ $bg: if($kendo-enable-color-system, k-get-swatch-color( $bg-prop, $source-palette-name ), if( k-meta-type-of($bg-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$bg-prop} ), $bg-prop ));
5654
+ $text: if($kendo-enable-color-system, k-get-swatch-color( $text-prop, $source-palette-name ), if( k-meta-type-of($text-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$text-prop} ), $text-prop ));
5655
+ $border: if($kendo-enable-color-system, k-get-swatch-color( $border-prop, $source-palette-name ), if( k-meta-type-of($border-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$border-prop} ), $border-prop ));
5210
5656
 
5211
5657
 
5212
5658
  $temp: k-map-deep-merge( $temp, (
@@ -5218,7 +5664,7 @@ $kendo-palettes: (
5218
5664
  // Add outline if provided in the map
5219
5665
  @if ( k-list-length($indices) > 3 ) {
5220
5666
  $outline-prop: k-list-nth($indices, 4);
5221
- $outline: if( k-meta-type-of($outline-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$outline-prop} ), $outline-prop );
5667
+ $outline: if($kendo-enable-color-system, k-get-swatch-color( $outline-prop, $source-palette-name ), if( k-meta-type-of($outline-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$outline-prop} ), $outline-prop ));
5222
5668
 
5223
5669
  $temp: k-map-deep-merge( $temp, (
5224
5670
  #{$prefix}outline: $outline
@@ -5245,6 +5691,18 @@ $kendo-palettes: (
5245
5691
  @return $result;
5246
5692
  }
5247
5693
 
5694
+ @function k-hex-to-rgb( $color ) {
5695
+ @if($color) {
5696
+ $r: k-color-red($color);
5697
+ $g: k-color-green($color);
5698
+ $b: k-color-blue($color);
5699
+
5700
+ @return $r, $g, $b;
5701
+ } @else {
5702
+ @return null;
5703
+ }
5704
+ }
5705
+
5248
5706
  // #endregion
5249
5707
  // #region @import "./_mixins.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_mixins.import.scss
5250
5708
  @mixin k-css-vars($map) {
@@ -5256,199 +5714,294 @@ $kendo-palettes: (
5256
5714
  }
5257
5715
 
5258
5716
  // #endregion
5259
- // #region @import "./_variables.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_variables.scss
5260
- // Color constants
5717
+ // #region @import "./_swatch.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_swatch.scss
5718
+ // #region @import "./_functions.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_functions.import.scss
5719
+ // File already imported_once. Skipping output.
5720
+ // #endregion
5261
5721
 
5262
- /// The color white.
5263
- /// Note: you cannot change this value.
5264
- /// @type Color
5265
- /// @group color-system
5266
- $kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-default
5722
+ // Config
5723
+ $kendo-enable-color-system: false !default;
5267
5724
 
5268
- /// The color black.
5269
- /// Note: you cannot change this value.
5270
- /// @type Color
5271
- /// @group color-system
5272
- $kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-default
5725
+ // Colors
5726
+ $_default-colors: (
5727
+ // Misc
5728
+ app-surface: null,
5729
+ on-app-surface: null,
5730
+ subtle: null,
5731
+ surface: null,
5732
+ surface-alt: null,
5733
+ border: null,
5734
+ border-alt: null,
5735
+ // Base
5736
+ base-subtle: null,
5737
+ base-subtle-hover: null,
5738
+ base-subtle-active: null,
5739
+ base: null,
5740
+ base-hover: null,
5741
+ base-active: null,
5742
+ base-emphasis: null,
5743
+ base-on-subtle: null,
5744
+ on-base: null,
5745
+ base-on-surface: null,
5746
+ // Primary
5747
+ primary-subtle: null,
5748
+ primary-subtle-hover: null,
5749
+ primary-subtle-active: null,
5750
+ primary: null,
5751
+ primary-hover: null,
5752
+ primary-active: null,
5753
+ primary-emphasis: null,
5754
+ primary-on-subtle: null,
5755
+ on-primary: null,
5756
+ primary-on-surface: null,
5757
+ // Secondary
5758
+ secondary-subtle: null,
5759
+ secondary-subtle-hover: null,
5760
+ secondary-subtle-active: null,
5761
+ secondary: null,
5762
+ secondary-hover: null,
5763
+ secondary-active: null,
5764
+ secondary-emphasis: null,
5765
+ secondary-on-subtle: null,
5766
+ on-secondary: null,
5767
+ secondary-on-surface: null,
5768
+ // Tertiary
5769
+ tertiary-subtle: null,
5770
+ tertiary-subtle-hover: null,
5771
+ tertiary-subtle-active: null,
5772
+ tertiary: null,
5773
+ tertiary-hover: null,
5774
+ tertiary-active: null,
5775
+ tertiary-emphasis: null,
5776
+ tertiary-on-subtle: null,
5777
+ on-tertiary: null,
5778
+ tertiary-on-surface: null,
5779
+ // Info
5780
+ info-subtle: null,
5781
+ info-subtle-hover: null,
5782
+ info-subtle-active: null,
5783
+ info: null,
5784
+ info-hover: null,
5785
+ info-active: null,
5786
+ info-emphasis: null,
5787
+ info-on-subtle: null,
5788
+ on-info: null,
5789
+ info-on-surface: null,
5790
+ // Success
5791
+ success-subtle: null,
5792
+ success-subtle-hover: null,
5793
+ success-subtle-active: null,
5794
+ success: null,
5795
+ success-hover: null,
5796
+ success-active: null,
5797
+ success-emphasis: null,
5798
+ success-on-subtle: null,
5799
+ on-success: null,
5800
+ success-on-surface: null,
5801
+ // Warning
5802
+ warning-subtle: null,
5803
+ warning-subtle-hover: null,
5804
+ warning-subtle-active: null,
5805
+ warning: null,
5806
+ warning-hover: null,
5807
+ warning-active: null,
5808
+ warning-emphasis: null,
5809
+ warning-on-subtle: null,
5810
+ on-warning: null,
5811
+ warning-on-surface: null,
5812
+ // Error
5813
+ error-subtle: null,
5814
+ error-subtle-hover: null,
5815
+ error-subtle-active: null,
5816
+ error: null,
5817
+ error-hover: null,
5818
+ error-active: null,
5819
+ error-emphasis: null,
5820
+ error-on-subtle: null,
5821
+ on-error: null,
5822
+ error-on-surface: null,
5823
+ // Light
5824
+ light-subtle: null,
5825
+ light-subtle-hover: null,
5826
+ light-subtle-active: null,
5827
+ light: null,
5828
+ light-hover: null,
5829
+ light-active: null,
5830
+ light-emphasis: null,
5831
+ light-on-subtle: null,
5832
+ on-light: null,
5833
+ light-on-surface: null,
5834
+ // Dark
5835
+ dark-subtle: null,
5836
+ dark-subtle-hover: null,
5837
+ dark-subtle-active: null,
5838
+ dark: null,
5839
+ dark-hover: null,
5840
+ dark-active: null,
5841
+ dark-emphasis: null,
5842
+ dark-on-subtle: null,
5843
+ on-dark: null,
5844
+ dark-on-surface: null,
5845
+ // Inverse
5846
+ inverse-subtle: null,
5847
+ inverse-subtle-hover: null,
5848
+ inverse-subtle-active: null,
5849
+ inverse: null,
5850
+ inverse-hover: null,
5851
+ inverse-active: null,
5852
+ inverse-emphasis: null,
5853
+ inverse-on-subtle: null,
5854
+ on-inverse: null,
5855
+ inverse-on-surface: null,
5856
+ // Series A
5857
+ series-a: null,
5858
+ series-a-bold: null,
5859
+ series-a-bolder: null,
5860
+ series-a-subtle: null,
5861
+ series-a-subtler: null,
5862
+ // Series B
5863
+ series-b: null,
5864
+ series-b-bold: null,
5865
+ series-b-bolder: null,
5866
+ series-b-subtle: null,
5867
+ series-b-subtler: null,
5868
+ // Series C
5869
+ series-c: null,
5870
+ series-c-bold: null,
5871
+ series-c-bolder: null,
5872
+ series-c-subtle: null,
5873
+ series-c-subtler: null,
5874
+ // Series D
5875
+ series-d: null,
5876
+ series-d-bold: null,
5877
+ series-d-bolder: null,
5878
+ series-d-subtle: null,
5879
+ series-d-subtler: null,
5880
+ // Series Е
5881
+ series-e: null,
5882
+ series-e-bold: null,
5883
+ series-e-bolder: null,
5884
+ series-e-subtle: null,
5885
+ series-e-subtler: null,
5886
+ // Series F
5887
+ series-f: null,
5888
+ series-f-bold: null,
5889
+ series-f-bolder: null,
5890
+ series-f-subtle: null,
5891
+ series-f-subtler: null,
5892
+ ) !default;
5273
5893
 
5274
- /// The color transparent.
5275
- /// Note: you cannot change this value.
5276
- /// @type Color
5894
+ /// The global default Colors map.
5277
5895
  /// @group color-system
5278
- $kendo-color-rgba-transparent: rgba( 0, 0, 0, 0 ); // stylelint-disable-line scss/dollar-variable-default
5896
+ $kendo-colors: $_default-colors !default;
5897
+ $kendo-colors: k-map-merge($_default-colors, $kendo-colors);
5279
5898
 
5280
- /// A gradient that goes from transparent to black.
5281
- /// Note: you cannot change this value.
5282
- /// @type Gradient
5283
- /// @group color-system
5284
- $kendo-gradient-transparent-to-black: rgba( black, 0 ), black; // stylelint-disable-line scss/dollar-variable-default
5899
+ @function k-color($key, $rgb: false) {
5900
+ $_color: k-map-get($kendo-colors, $key);
5285
5901
 
5286
- /// A gradient that goes from transparent to white.
5287
- /// Note: you cannot change this value.
5288
- /// @type Gradient
5289
- /// @group color-system
5290
- $kendo-gradient-transparent-to-white: rgba( white, 0 ), white; // stylelint-disable-line scss/dollar-variable-default
5291
-
5292
- /// A gradient that goes from black to transparent.
5293
- /// Note: you cannot change this value.
5294
- /// @type Gradient
5295
- /// @group color-system
5296
- $kendo-gradient-black-to-transparent: black, rgba( black, 0 ); // stylelint-disable-line scss/dollar-variable-default
5297
-
5298
- /// A gradient that goes from white to transparent.
5299
- /// Note: you cannot change this value.
5300
- /// @type Gradient
5301
- /// @group color-system
5302
- $kendo-gradient-white-to-transparent: white, rgba( white, 0 ); // stylelint-disable-line scss/dollar-variable-default
5902
+ @if ($_color) {
5903
+ @if ($rgb) {
5904
+ @return var(--kendo-color-#{$key}-rgb, k-hex-to-rgb($_color));
5905
+ } @else {
5906
+ @return var(--kendo-color-#{$key}, $_color);
5907
+ }
5908
+ } @else {
5909
+ @error "Color Variable \`#{$key}\` does not exists in the color collection.";
5910
+ }
5911
+ }
5303
5912
 
5304
- /// A gradient that cycles through the colors of the rainbow.
5305
- /// Note: you cannot change this value.
5306
- /// @type Gradient
5307
- /// @group color-system
5308
- $kendo-gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default
5913
+ @mixin color-system--styles() {
5914
+ :root {
5915
+ @each $key, $value in $kendo-colors {
5916
+ @if($value) {
5917
+ --kendo-color-#{$key}: #{$value};
5918
+ --kendo-color-#{$key}-rgb: #{k-hex-to-rgb($value)};
5919
+ }
5920
+ }
5921
+ }
5922
+ }
5309
5923
 
5924
+ // #endregion
5925
+ // #region @import "./_constants.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_constants.scss
5926
+ // File already imported_once. Skipping output.
5927
+ // #endregion
5928
+ // #region @import "./_swatch-legacy.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_swatch-legacy.scss
5929
+ $kendo-is-dark-theme: false !default;
5310
5930
 
5311
5931
  // Root styles
5312
- $kendo-body-bg: $kendo-color-white !default;
5313
- $kendo-body-text: k-get-theme-color-var( neutral-160 ) !default;
5932
+ $kendo-body-bg: null !default;
5933
+ $kendo-body-text: null !default;
5314
5934
 
5315
5935
  // Component styles
5316
- $kendo-component-bg: $kendo-body-bg !default;
5317
- $kendo-component-text: $kendo-body-text !default;
5318
- $kendo-component-border: k-get-theme-color-var( neutral-30 ) !default;
5936
+ $kendo-component-bg: null !default;
5937
+ $kendo-component-text: null !default;
5938
+ $kendo-component-border: null !default;
5319
5939
 
5320
5940
  // States styles
5321
- $kendo-hover-bg: k-get-theme-color-var( neutral-20 ) !default;
5322
- $kendo-hover-text: k-get-theme-color-var( neutral-190 ) !default;
5323
- $kendo-hover-border: k-get-theme-color-var( neutral-20 ) !default;
5941
+ $kendo-hover-bg: null !default;
5942
+ $kendo-hover-text: null !default;
5943
+ $kendo-hover-border: null !default;
5324
5944
 
5325
- $kendo-selected-bg: k-get-theme-color-var( neutral-30 ) !default;
5326
- $kendo-selected-text: k-get-theme-color-var( neutral-160 ) !default;
5327
- $kendo-selected-border: k-get-theme-color-var( neutral-130 ) !default;
5945
+ $kendo-selected-bg: null !default;
5946
+ $kendo-selected-text: null !default;
5947
+ $kendo-selected-border: null !default;
5328
5948
 
5329
- $kendo-selected-hover-bg: k-get-theme-color-var( neutral-40 ) !default;
5330
- $kendo-selected-hover-text: k-get-theme-color-var( neutral-190 ) !default;
5331
- $kendo-selected-hover-border: k-get-theme-color-var( neutral-130 ) !default;
5949
+ $kendo-selected-hover-bg: null !default;
5950
+ $kendo-selected-hover-text: null !default;
5951
+ $kendo-selected-hover-border: null !default;
5332
5952
 
5333
- $kendo-focus-outline: k-get-theme-color-var( neutral-130 ) !default;
5953
+ $kendo-focus-outline: null !default;
5334
5954
 
5335
- $kendo-subtle-text: k-get-theme-color-var( neutral-130 ) !default;
5955
+ $kendo-subtle-text: null !default;
5336
5956
 
5337
5957
  // Link
5338
- $kendo-link-text: k-get-theme-color-var( primary-100 ) !default;
5339
- $kendo-link-hover-text: k-get-theme-color-var( primary-120 ) !default;
5958
+ $kendo-link-text: null !default;
5959
+ $kendo-link-hover-text: null !default;
5340
5960
 
5341
5961
  // Validator
5342
- $kendo-invalid-bg: initial !default;
5343
- $kendo-invalid-text: k-get-theme-color-var( error-190 ) !default;
5344
- $kendo-invalid-border: k-get-theme-color-var( error-190 ) !default;
5962
+ $kendo-invalid-bg: null !default;
5963
+ $kendo-invalid-text: null !default;
5964
+ $kendo-invalid-border: null !default;
5345
5965
  $kendo-invalid-shadow: null !default;
5346
5966
 
5347
5967
  // Disabled Styling
5348
- $kendo-disabled-bg: k-get-theme-color-var( neutral-20 ) !default;
5349
- $kendo-disabled-text: k-get-theme-color-var( neutral-90 ) !default;
5350
- $kendo-disabled-border: transparent !default;
5968
+ $kendo-disabled-bg: null !default;
5969
+ $kendo-disabled-text: null !default;
5970
+ $kendo-disabled-border: null !default;
5351
5971
 
5352
5972
  // Loading
5353
- $kendo-loading-bg: $kendo-component-bg !default;
5354
- $kendo-loading-text: currentColor !default;
5355
-
5356
-
5357
- // Theme colors
5358
- $kendo-theme-colors: (
5359
- primary: (
5360
- text: k-get-theme-color-var( primary-130 ),
5361
- bg: k-get-theme-color-var( primary-20 ),
5362
- border: k-get-theme-color-var( primary-20 )
5363
- ),
5364
- info: (
5365
- text: k-get-theme-color-var( info-190 ),
5366
- bg: k-get-theme-color-var( info-20 ),
5367
- border: k-get-theme-color-var( info-20 )
5368
- ),
5369
- success: (
5370
- text: k-get-theme-color-var( success-190 ),
5371
- bg: k-get-theme-color-var( success-20 ),
5372
- border: k-get-theme-color-var( success-20 )
5373
- ),
5374
- warning: (
5375
- text: k-get-theme-color-var( neutral-160 ),
5376
- bg: k-get-theme-color-var( warning-20 ),
5377
- border: k-get-theme-color-var( warning-20 )
5378
- ),
5379
- error: (
5380
- text: k-get-theme-color-var( error-190 ),
5381
- bg: k-get-theme-color-var( error-20 ),
5382
- border: k-get-theme-color-var( error-20 )
5383
- )
5384
- ) !default;
5973
+ $kendo-loading-bg: null !default;
5974
+ $kendo-loading-text: null !default;
5385
5975
 
5976
+ $kendo-palettes: () !default;
5977
+ $kendo-theme-colors: () !default;
5386
5978
 
5387
5979
  @mixin color-system-styles() {
5388
5980
  :root {
5389
- @include k-css-vars( $kendo-palettes );
5390
- @include k-css-vars( $kendo-theme-colors );
5391
-
5392
- --kendo-body-bg: #{$kendo-body-bg};
5393
- --kendo-body-text: #{$kendo-body-text};
5394
-
5395
- --kendo-component-bg: #{$kendo-component-bg};
5396
- --kendo-component-text: #{$kendo-component-text};
5397
- --kendo-component-border: #{$kendo-component-border};
5398
-
5399
- --kendo-link-text: #{$kendo-link-text};
5400
- --kendo-link-hover-text: #{$kendo-link-hover-text};
5401
-
5402
- --kendo-disabled-bg: #{$kendo-disabled-bg};
5403
- --kendo-disabled-text: #{$kendo-disabled-text};
5404
- --kendo-disabled-border: #{$kendo-disabled-border};
5405
-
5406
- --kendo-hover-bg: #{$kendo-hover-bg};
5407
- --kendo-hover-text: #{$kendo-hover-text};
5408
- --kendo-hover-border: #{$kendo-hover-border};
5409
-
5410
- --kendo-selected-bg: #{$kendo-selected-bg};
5411
- --kendo-selected-text: #{$kendo-selected-text};
5412
- --kendo-selected-border: #{$kendo-selected-border};
5413
-
5414
- --kendo-selected-hover-bg: #{$kendo-selected-hover-bg};
5415
- --kendo-selected-hover-text: #{$kendo-selected-hover-text};
5416
- --kendo-selected-hover-border: #{$kendo-selected-hover-border};
5981
+ @include k-css-vars($kendo-palettes);
5982
+ @include k-css-vars($kendo-theme-colors);
5417
5983
 
5418
- --kendo-focus-outline: #{$kendo-focus-outline};
5984
+ // Text colors
5985
+ @each $theme-color, $color-props in $kendo-theme-colors {
5986
+ $_color: k-map-get($color-props, text);
5419
5987
 
5420
- --kendo-subtle-text: #{$kendo-subtle-text};
5421
-
5422
- --kendo-invalid-bg: #{$kendo-invalid-bg};
5423
- --kendo-invalid-text: #{$kendo-invalid-text};
5424
- --kendo-invalid-border: #{$kendo-invalid-border};
5425
- --kendo-invalid-shadow: #{$kendo-invalid-shadow};
5426
-
5427
- --kendo-border-radius-sm: #{$kendo-border-radius-sm};
5428
- --kendo-border-radius-md: #{$kendo-border-radius-md};
5429
- --kendo-border-radius-lg: #{$kendo-border-radius-lg};
5430
- }
5431
-
5432
- // Text colors
5433
- @each $theme-color, $color-props in $kendo-theme-colors {
5434
- $_color: k-map-get( $color-props, text );
5435
-
5436
- .k-text-#{$theme-color},
5437
- .k-color-#{$theme-color} {
5438
- color: var( --kendo-text-#{$theme-color}, #{$_color} );
5439
- }
5440
- .\!k-text-#{$theme-color},
5441
- .\!k-color-#{$theme-color} {
5442
- color: var( --kendo-text-#{$theme-color}, #{$_color} ) !important; // stylelint-disable-line declaration-no-important
5443
- }
5988
+ .k-text-#{$theme-color},
5989
+ .k-color-#{$theme-color} {
5990
+ color: var(--kendo-text-#{$theme-color}, #{$_color});
5991
+ }
5992
+ .\!k-text-#{$theme-color},
5993
+ .\!k-color-#{$theme-color} {
5994
+ color: var(--kendo-text-#{$theme-color}, #{$_color}) !important; // stylelint-disable-line declaration-no-important
5995
+ }
5444
5996
 
5445
- .k-bg-#{$theme-color} {
5446
- background-color: var( --kendo-bg-#{$theme-color}, #{$_color} );
5447
- }
5448
- .\!k-bg-#{$theme-color} {
5449
- background-color: var( --kendo-bg-#{$theme-color}, #{$_color} ) !important; // stylelint-disable-line declaration-no-important
5997
+ .k-bg-#{$theme-color} {
5998
+ background-color: var(--kendo-bg-#{$theme-color}, #{$_color});
5999
+ }
6000
+ .\!k-bg-#{$theme-color} {
6001
+ background-color: var(--kendo-bg-#{$theme-color}, #{$_color}) !important; // stylelint-disable-line declaration-no-important
6002
+ }
5450
6003
  }
5451
- };
6004
+ }
5452
6005
  }
5453
6006
 
5454
6007
  // #endregion
@@ -5849,6 +6402,7 @@ $kendo-components: (
5849
6402
  "pdf-viewer",
5850
6403
  "scroller",
5851
6404
  "scrollview",
6405
+ "prompt",
5852
6406
 
5853
6407
  // Dataviz
5854
6408
  "dataviz",
@@ -6187,6 +6741,7 @@ $_kendo-dependencies: (
6187
6741
  ),
6188
6742
  popup: (),
6189
6743
  progressbar: (),
6744
+ prompt: (),
6190
6745
  radio: (),
6191
6746
  rating: (
6192
6747
  "icon"
@@ -6849,9 +7404,17 @@ $_imported: () !default;
6849
7404
  }
6850
7405
  }
6851
7406
  // #endregion
7407
+ // #region @import "./_colors.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/styles/_colors.scss
7408
+ @mixin kendo-core--styles--colors() {
7409
+ @if ($kendo-enable-color-system) {
7410
+ @include color-system--styles();
7411
+ }
7412
+ }
6852
7413
 
7414
+ // #endregion
6853
7415
 
6854
7416
  @mixin kendo-core--styles() {
7417
+ @include kendo-core--styles--colors();
6855
7418
  @include kendo-core--styles--accessibility();
6856
7419
  @include kendo-core--styles--asp-fallback();
6857
7420
  @include kendo-core--styles--layout();
@@ -7021,6 +7584,77 @@ $kendo-zindex-loading: 100 !default;
7021
7584
 
7022
7585
  // #endregion
7023
7586
 
7587
+ // Backward compatibility
7588
+ // #region @import "./color-system/_swatch-legacy.scss"; -> scss/core/color-system/_swatch-legacy.scss
7589
+ @if ($kendo-enable-color-system) {
7590
+ $input-bg: k-color( app-surface );
7591
+ $input-color: k-color( on-app-surface );
7592
+ $input-border-color: k-color( border-alt );
7593
+ $input-placeholder-color: k-color( subtle );
7594
+ $kendo-color-primary: k-color( primary );
7595
+ $kendo-color-primary-contrast: k-color( on-primary );
7596
+ $kendo-color-secondary: k-color( secondary );
7597
+ $kendo-color-tertiary: k-color( tertiary );
7598
+ $kendo-color-info: k-color( info );
7599
+ $kendo-color-success: k-color( success );
7600
+ $kendo-color-warning: k-color( warning );
7601
+ $kendo-color-error: k-color( error );
7602
+ $kendo-color-dark: k-color( dark );
7603
+ $kendo-color-light: k-color( light );
7604
+ $kendo-color-inverse: $kendo-color-dark;
7605
+ $kendo-body-bg: k-color( app-surface );
7606
+ $kendo-body-text: k-color( on-app-surface );
7607
+ $kendo-subtle-text: k-color( subtle );
7608
+ $kendo-app-bg: k-color( surface );
7609
+ $kendo-app-text: $kendo-body-text;
7610
+ $kendo-app-border: k-color( border );
7611
+ $kendo-link-text: $kendo-color-primary;
7612
+ $kendo-link-hover-text: k-color( primary-hover );
7613
+ $kendo-component-bg: $kendo-body-bg;
7614
+ $kendo-component-text: $kendo-body-text;
7615
+ $kendo-component-border: $kendo-app-border;
7616
+ $kendo-base-bg: k-color( surface );
7617
+ $kendo-base-text: $kendo-body-text;
7618
+ $kendo-base-border: $kendo-app-border;
7619
+ $kendo-base-gradient: null;
7620
+ $kendo-hover-bg: k-color( base-subtle-hover );
7621
+ $kendo-hover-text: $kendo-base-text;
7622
+ $kendo-hover-border: $kendo-base-border;
7623
+ $kendo-hover-gradient: null;
7624
+ $kendo-selected-bg: $kendo-color-primary;
7625
+ $kendo-selected-text: $kendo-color-primary-contrast;
7626
+ $kendo-selected-border: k-color( primary );
7627
+ $kendo-selected-gradient: $kendo-base-gradient;
7628
+ $kendo-selected-hover-bg: k-color( primary-hover );
7629
+ $kendo-selected-hover-text: $kendo-selected-text;
7630
+ $kendo-selected-hover-border: $kendo-base-border;
7631
+ $kendo-selected-hover-gradient: $kendo-base-gradient;
7632
+ $kendo-disabled-text: k-color( on-app-surface );
7633
+ $kendo-component-header-bg: $kendo-base-bg;
7634
+ $kendo-component-header-text: $kendo-component-text;
7635
+ $kendo-component-header-border: $kendo-component-border;
7636
+ $kendo-component-header-gradient: null;
7637
+ $kendo-invalid-bg: null;
7638
+ $kendo-invalid-text: $kendo-color-error;
7639
+ $kendo-invalid-border: $kendo-color-error;
7640
+ $kendo-invalid-shadow: 0 0 0 .25rem rgba( k-color( error, true ), .25 );
7641
+
7642
+ $kendo-theme-colors: (
7643
+ "primary": $kendo-color-primary,
7644
+ "secondary": $kendo-color-secondary,
7645
+ "tertiary": $kendo-color-tertiary,
7646
+ "info": $kendo-color-info,
7647
+ "success": $kendo-color-success,
7648
+ "warning": $kendo-color-warning,
7649
+ "error": $kendo-color-error,
7650
+ "dark": $kendo-color-dark,
7651
+ "light": $kendo-color-light,
7652
+ "inverse": $kendo-color-inverse,
7653
+ );
7654
+ }
7655
+
7656
+ // #endregion
7657
+
7024
7658
  // Expose
7025
7659
  @include exports("kendo-core-styles") {
7026
7660
  @include kendo-core--styles();
@@ -7957,12 +8591,10 @@ $kendo-zindex-loading: 100 !default;
7957
8591
  // #region @import "@progress/kendo-theme-default/scss/common/_indicators.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-default/scss/common/_indicators.scss
7958
8592
  @include exports( "common/indicators/current-time" ) {
7959
8593
 
7960
- $kendo-current-time-width: 1px !default;
7961
8594
  $kendo-current-time-color: #ff0000 !default;
7962
8595
 
7963
8596
  // Layout
7964
8597
  .k-current-time {
7965
- width: $kendo-current-time-width;
7966
8598
  position: absolute;
7967
8599
 
7968
8600
  &.k-current-time-arrow-left,
@@ -16828,11 +17460,19 @@ $kendo-message-box-link-text-decoration: underline !default;
16828
17460
 
16829
17461
  @each $color-name, $color in $kendo-theme-colors {
16830
17462
  .k-messagebox-#{$color-name} {
16831
- @include fill(
16832
- k-color-level( $color, $kendo-message-box-text-level ),
16833
- k-color-level( $color, $kendo-message-box-bg-level ),
16834
- k-color-level( $color, $kendo-message-box-border-level )
16835
- );
17463
+ @if $color-name == "inverse" {
17464
+ @include fill(
17465
+ if($kendo-enable-color-system, k-color( dark-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )),
17466
+ if($kendo-enable-color-system, k-color( dark-subtle ), k-color-level( $color, $kendo-message-box-bg-level )),
17467
+ if($kendo-enable-color-system, k-color( dark-hover ), k-color-level( $color, $kendo-message-box-border-level ))
17468
+ );
17469
+ } @else {
17470
+ @include fill(
17471
+ if($kendo-enable-color-system, k-color( #{$color-name}-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )),
17472
+ if($kendo-enable-color-system, k-color( #{$color-name}-subtle ), k-color-level( $color, $kendo-message-box-bg-level )),
17473
+ if($kendo-enable-color-system, k-color( #{$color-name}-emphasis ), k-color-level( $color, $kendo-message-box-border-level ))
17474
+ );
17475
+ }
16836
17476
  }
16837
17477
  }
16838
17478
 
@@ -17384,7 +18024,7 @@ $kendo-list-item-focus-bg: null !default;
17384
18024
  $kendo-list-item-focus-text: null !default;
17385
18025
  /// The box shadow of the focused List items.
17386
18026
  /// @group list
17387
- $kendo-list-item-focus-shadow: inset 0 0 0 3px rgba( $kendo-list-text, .15 ) !default;
18027
+ $kendo-list-item-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-list-text, .15 )) !default;
17388
18028
 
17389
18029
  /// The background color of the selected List items.
17390
18030
  /// @group list
@@ -17480,7 +18120,7 @@ $kendo-checkbox-bg: $kendo-component-bg !default;
17480
18120
  $kendo-checkbox-text: null !default;
17481
18121
  /// The border color of CheckBox.
17482
18122
  /// @group checkbox
17483
- $kendo-checkbox-border: if( k-is-light( $kendo-checkbox-bg ), $gray-400, $gray-600 ) !default;
18123
+ $kendo-checkbox-border: if($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-checkbox-bg ), $gray-400, $gray-600 )) !default;
17484
18124
 
17485
18125
  /// The background color of the hovered CheckBox.
17486
18126
  /// @group checkbox
@@ -17497,7 +18137,7 @@ $kendo-checkbox-hover-border: null !default;
17497
18137
  $kendo-checkbox-checked-bg: $kendo-color-primary !default;
17498
18138
  /// The color of the checked CheckBox.
17499
18139
  /// @group checkbox
17500
- $kendo-checkbox-checked-text: k-contrast-color( $kendo-checkbox-checked-bg ) !default;
18140
+ $kendo-checkbox-checked-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-checked-bg )) !default;
17501
18141
  /// The border color of the checked CheckBox.
17502
18142
  /// @group checkbox
17503
18143
  $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
@@ -17514,10 +18154,10 @@ $kendo-checkbox-indeterminate-border: $kendo-checkbox-checked-border !default;
17514
18154
 
17515
18155
  /// The border color of the focused CheckBox.
17516
18156
  /// @group checkbox
17517
- $kendo-checkbox-focus-border: k-try-tint( $kendo-color-primary, 50% ) !default;
18157
+ $kendo-checkbox-focus-border: if($kendo-enable-color-system, k-color( primary-emphasis ), k-try-tint( $kendo-color-primary, 50% )) !default;
17518
18158
  /// The box shadow of the focused CheckBox.
17519
18159
  /// @group checkbox
17520
- $kendo-checkbox-focus-shadow: 0 0 0 .25rem rgba( $kendo-color-primary, .25 ) !default;
18160
+ $kendo-checkbox-focus-shadow: 0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) !default;
17521
18161
  /// The border color of the focused and checked CheckBox.
17522
18162
  /// @group checkbox
17523
18163
  $kendo-checkbox-focus-checked-border: $kendo-checkbox-checked-border !default;
@@ -18336,7 +18976,7 @@ $kendo-checkbox-ripple-opacity: .25 !default;
18336
18976
  &.k-selected:hover,
18337
18977
  &.k-selected.k-hover {
18338
18978
  color: $kendo-list-item-selected-text;
18339
- background-color: k-color-shade( $kendo-list-item-selected-bg );
18979
+ background-color: if($kendo-enable-color-system, k-color( primary-hover ), k-color-shade( $kendo-list-item-selected-bg ));
18340
18980
  }
18341
18981
  }
18342
18982
 
@@ -19293,7 +19933,7 @@ $kendo-table-group-row-border: $kendo-table-header-border !default;
19293
19933
 
19294
19934
  /// Background color of alternating rows in table.
19295
19935
  /// @group table
19296
- $kendo-table-alt-row-bg: rgba( k-contrast-color( $kendo-table-bg ), .04 ) !default;
19936
+ $kendo-table-alt-row-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-color( $kendo-table-bg ), .04 )) !default;
19297
19937
  /// Text color of alternating rows in table.
19298
19938
  /// @group table
19299
19939
  $kendo-table-alt-row-text: null !default;
@@ -19304,7 +19944,7 @@ $kendo-table-alt-row-border: null !default;
19304
19944
 
19305
19945
  /// Background color of hovered rows in table.
19306
19946
  /// @group table
19307
- $kendo-table-hover-bg: rgba( k-contrast-color( $kendo-table-bg ), .08 ) !default;
19947
+ $kendo-table-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .09 ), rgba( k-contrast-color( $kendo-table-bg ), .08 )) !default;
19308
19948
  /// Text color of hovered rows in table.
19309
19949
  /// @group table
19310
19950
  $kendo-table-hover-text: null !default;
@@ -19329,7 +19969,7 @@ $kendo-table-focus-shadow: inset 0 0 0 2px rgba( $kendo-color-black, .08) !defau
19329
19969
 
19330
19970
  /// Background color of selected rows in table.
19331
19971
  /// @group table
19332
- $kendo-table-selected-bg: rgba( $kendo-selected-bg, .25 ) !default;
19972
+ $kendo-table-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
19333
19973
  /// Text color of selected rows in table.
19334
19974
  /// @group table
19335
19975
  $kendo-table-selected-text: $kendo-table-text !default;
@@ -20033,7 +20673,7 @@ $kendo-avatar-theme-colors: $kendo-theme-colors !default;
20033
20673
  @each $name, $color in $kendo-avatar-theme-colors {
20034
20674
  .k-avatar-solid-#{$name} {
20035
20675
  border-color: $color;
20036
- color: k-contrast-legacy( $color );
20676
+ color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
20037
20677
  background-color: $color;
20038
20678
  }
20039
20679
  }
@@ -20386,7 +21026,7 @@ $kendo-badge-sizes: (
20386
21026
  @each $name, $color in $kendo-theme-colors {
20387
21027
  .k-badge-solid-#{$name} {
20388
21028
  border-color: $color;
20389
- color: k-contrast-legacy( $color );
21029
+ color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
20390
21030
  background-color: $color;
20391
21031
  }
20392
21032
  }
@@ -20575,15 +21215,15 @@ $kendo-button-sizes: (
20575
21215
  /// @group button
20576
21216
  $kendo-button-theme-colors: k-map-merge(
20577
21217
  $kendo-theme-colors,
20578
- ( "base": #e4e7eb )
21218
+ ( "base": if($kendo-enable-color-system, k-color( base ), #e4e7eb) )
20579
21219
  ) !default;
20580
21220
 
20581
21221
  /// The base background of the Button.
20582
21222
  /// @group button
20583
- $kendo-button-bg: #e4e7eb !default;
21223
+ $kendo-button-bg: if($kendo-enable-color-system, k-color( base ), #e4e7eb) !default;
20584
21224
  /// The base text color of the Button.
20585
21225
  /// @group button
20586
- $kendo-button-text: k-contrast-color( $kendo-button-bg, $gray-900 ) !default;
21226
+ $kendo-button-text: if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-button-bg, $gray-900 )) !default;
20587
21227
  /// The base border color of the Button.
20588
21228
  /// @group button
20589
21229
  $kendo-button-border: $kendo-button-bg !default;
@@ -20596,13 +21236,13 @@ $kendo-button-shadow: null !default;
20596
21236
 
20597
21237
  /// The base background of the hovered Button.
20598
21238
  /// @group button
20599
- $kendo-button-hover-bg: k-color-darken( $kendo-button-bg, 7.5% ) !default;
21239
+ $kendo-button-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-button-bg, 7.5% )) !default;
20600
21240
  /// The base text color of the hovered Button.
20601
21241
  /// @group button
20602
21242
  $kendo-button-hover-text: null !default;
20603
21243
  /// The base border color of the hovered Button.
20604
21244
  /// @group button
20605
- $kendo-button-hover-border: k-color-darken( $kendo-button-bg, 10% ) !default;
21245
+ $kendo-button-hover-border: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-button-bg, 10% )) !default;
20606
21246
  /// The base background gradient of the hovered Button.
20607
21247
  /// @group button
20608
21248
  $kendo-button-hover-gradient: null !default;
@@ -20612,13 +21252,13 @@ $kendo-button-hover-shadow: null !default;
20612
21252
 
20613
21253
  /// The base background color of the active Button.
20614
21254
  /// @group button
20615
- $kendo-button-active-bg: k-color-darken( $kendo-button-bg, 10% ) !default;
21255
+ $kendo-button-active-bg: if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 10% )) !default;
20616
21256
  /// The base text color of the active Button.
20617
21257
  /// @group button
20618
21258
  $kendo-button-active-text: null !default;
20619
21259
  /// The base border color of the active Button.
20620
21260
  /// @group button
20621
- $kendo-button-active-border: k-color-darken( $kendo-button-bg, 12.5% ) !default;
21261
+ $kendo-button-active-border: if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 12.5% )) !default;
20622
21262
  /// The base background gradient of the active Button.
20623
21263
  /// @group button
20624
21264
  $kendo-button-active-gradient: null !default;
@@ -20628,13 +21268,13 @@ $kendo-button-active-shadow: null !default;
20628
21268
 
20629
21269
  /// The base background color of the selected Button.
20630
21270
  /// @group button
20631
- $kendo-button-selected-bg: k-color-darken( $kendo-color-primary, 10% ) !default;
21271
+ $kendo-button-selected-bg: if($kendo-enable-color-system, k-color( primary-active ), k-color-darken( $kendo-color-primary, 10% )) !default;
20632
21272
  /// The text color of the selected Button.
20633
21273
  /// @group button
20634
- $kendo-button-selected-text: k-contrast-color( $kendo-button-selected-bg ) !default;
21274
+ $kendo-button-selected-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-button-selected-bg )) !default;
20635
21275
  /// The border color of the selected Button.
20636
21276
  /// @group button
20637
- $kendo-button-selected-border: k-color-darken( $kendo-color-primary, 12.5% ) !default;
21277
+ $kendo-button-selected-border: if($kendo-enable-color-system, k-color( primary-active ), k-color-darken( $kendo-color-primary, 12.5% )) !default;
20638
21278
  /// The background gradient of the selected Button.
20639
21279
  /// @group button
20640
21280
  $kendo-button-selected-gradient: $kendo-button-active-gradient !default;
@@ -20644,19 +21284,19 @@ $kendo-button-selected-shadow: $kendo-button-active-shadow !default;
20644
21284
 
20645
21285
  /// The base background of the focused Button.
20646
21286
  /// @group button
20647
- $kendo-button-focus-bg: k-color-darken( $kendo-button-bg, 10% ) !default;
21287
+ $kendo-button-focus-bg: if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 10% )) !default;
20648
21288
  /// The base text color of the focused Button.
20649
21289
  /// @group button
20650
21290
  $kendo-button-focus-text: null !default;
20651
21291
  /// The base border color of the focused Button.
20652
21292
  /// @group button
20653
- $kendo-button-focus-border: k-color-darken( $kendo-button-bg, 12.5% ) !default;
21293
+ $kendo-button-focus-border: if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 12.5% )) !default;
20654
21294
  /// The base background gradient of the focused Button.
20655
21295
  /// @group button
20656
21296
  $kendo-button-focus-gradient: null !default;
20657
21297
  /// The base shadow of the focused Button.
20658
21298
  /// @group button
20659
- $kendo-button-focus-shadow: 0 0 0 .25rem rgba( $kendo-button-border, .5 ) !default;
21299
+ $kendo-button-focus-shadow: 0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( border, true ), .5), rgba( $kendo-button-border, .5 )) !default;
20660
21300
 
20661
21301
  /// The base background of the disabled Button.
20662
21302
  /// @group button
@@ -20887,7 +21527,7 @@ $kendo-chip-outline-shadow: 0 0 0 2px rgba( $kendo-chip-base-bg, .16 ) !default;
20887
21527
  $kendo-chip-outline-hover-bg: $kendo-chip-outline-text !default;
20888
21528
  /// The base text color of the hovered outline Chip.
20889
21529
  /// @group chip
20890
- $kendo-chip-outline-hover-text: k-contrast-color( $kendo-chip-outline-hover-bg ) !default;
21530
+ $kendo-chip-outline-hover-text: if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-chip-outline-hover-bg )) !default;
20891
21531
 
20892
21532
  /// The base background color of the selected outline Chip.
20893
21533
  /// @group chip
@@ -21116,24 +21756,24 @@ $kendo-chip-list-sizes: (
21116
21756
  }
21117
21757
  } @else {
21118
21758
  @include fill(
21119
- k-try-shade( $color, 65% ),
21120
- k-try-tint( $color, 80% ),
21121
- k-try-tint( $color, 25% ),
21759
+ if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-try-shade( $color, 65% )),
21760
+ if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-try-tint( $color, 80% )),
21761
+ if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-try-tint( $color, 25% )),
21122
21762
  $kendo-chip-solid-gradient
21123
21763
  );
21124
21764
 
21125
21765
  &:focus,
21126
21766
  &.k-focus {
21127
- @include focus-indicator( 0 0 0 2px rgba( $color, .16 ) );
21767
+ @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( $name, true ), .16 ), rgba( $color, .16 )) );
21128
21768
  }
21129
21769
 
21130
21770
  &:hover,
21131
21771
  &.k-hover {
21132
- @include fill( $bg: k-try-tint($color, 65% ) );
21772
+ @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-hover ), k-try-tint($color, 65% )) );
21133
21773
  }
21134
21774
 
21135
21775
  &.k-selected {
21136
- @include fill( $bg: k-try-tint( $color, 50% ) );
21776
+ @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 50% )) );
21137
21777
  }
21138
21778
  }
21139
21779
  }
@@ -21171,54 +21811,56 @@ $kendo-chip-list-sizes: (
21171
21811
  }
21172
21812
  } @else if ($name == "warning") {
21173
21813
  @include fill(
21174
- if( $kendo-is-dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text),
21175
- if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white ),
21176
- if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)
21814
+ if($kendo-enable-color-system, $kendo-chip-outline-text, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text)),
21815
+ if($kendo-enable-color-system, k-color( app-surface ), if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )),
21816
+ if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
21177
21817
  );
21178
21818
 
21179
21819
  &:focus,
21180
21820
  &.k-focus {
21181
- @include focus-indicator( 0 0 0 2px if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
21821
+ @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( $name, true ), .16 ), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) );
21182
21822
  }
21183
21823
 
21184
21824
  &:hover,
21185
21825
  &.k-hover {
21186
21826
  @include fill(
21187
- $color: if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) ) ,
21188
- $bg: if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)
21827
+ $color: if($kendo-enable-color-system, k-color( on-#{$name} ), if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) )),
21828
+ $bg: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
21189
21829
  );
21190
21830
  }
21191
21831
 
21192
21832
  &.k-selected {
21193
21833
  @include fill(
21194
- $color: if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) ) ,
21195
- $bg: if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)
21834
+ $color: if($kendo-enable-color-system, k-color( on-#{$name} ), if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) )),
21835
+ $bg: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
21196
21836
  );
21197
21837
  }
21198
21838
  } @else {
21199
21839
  @include fill(
21200
- k-try-shade( $color, 25% ),
21201
- if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white ),
21202
- k-try-shade( $color, 25% )
21840
+ if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 25% )),
21841
+ if($kendo-enable-color-system, k-color( app-surface ), if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )),
21842
+ if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 25% ))
21203
21843
  );
21204
21844
 
21205
21845
  &:focus,
21206
21846
  &.k-focus {
21207
- @include focus-indicator( 0 0 0 2px if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
21847
+ @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( $name, true ), .16 ), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) );
21208
21848
  }
21209
21849
 
21210
21850
  &:hover,
21211
21851
  &.k-hover {
21212
21852
  @include fill(
21213
- $color: k-contrast-legacy( k-try-shade( $color, 25% ) ),
21214
- $bg: k-try-shade( $color, 25% )
21853
+ if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-try-shade( $color, 25% ) )),
21854
+ if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 25% )),
21855
+ if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 25% ))
21215
21856
  );
21216
21857
  }
21217
21858
 
21218
21859
  &.k-selected {
21219
21860
  @include fill(
21220
- $color: k-contrast-legacy( k-try-shade( $color, 25% ) ),
21221
- $bg: k-try-shade( $color, 25% )
21861
+ if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-try-shade( $color, 25% ) )),
21862
+ if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 25% )),
21863
+ if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 25% ))
21222
21864
  );
21223
21865
  }
21224
21866
  }
@@ -21243,16 +21885,17 @@ $kendo-chip-list-sizes: (
21243
21885
 
21244
21886
  @if ($name == "info") {
21245
21887
  @include fill (
21246
- $color: if( $kendo-is-dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text),
21247
- $border: if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)
21888
+ $color: if($kendo-enable-color-system, $kendo-chip-outline-text, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text)),
21889
+ $border: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
21248
21890
  );
21249
21891
 
21250
21892
  &:hover,
21251
21893
  &.k-hover,
21252
21894
  &.k-selected {
21253
21895
  @include fill(
21254
- $color: if( $kendo-is-dark-theme, k-contrast-color($color), $kendo-chip-outline-text),
21255
- $bg: $color
21896
+ if($kendo-enable-color-system, $kendo-chip-outline-text, if( $kendo-is-dark-theme, k-contrast-color($color), $kendo-chip-outline-text)),
21897
+ $color,
21898
+ $color
21256
21899
  );
21257
21900
  }
21258
21901
 
@@ -22265,7 +22908,7 @@ $kendo-skeleton-circle-border-radius: 9999px !default;
22265
22908
 
22266
22909
  /// The background color of the Skeleton item.
22267
22910
  /// @group skeleton
22268
- $kendo-skeleton-item-bg: rgba( $kendo-color-inverse, .2 ) !default;
22911
+ $kendo-skeleton-item-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), rgba( $kendo-color-inverse, .2 )) !default;
22269
22912
  /// The background color of the Skeleton wave animation.
22270
22913
  /// @group skeleton
22271
22914
  $kendo-skeleton-wave-bg: rgba( black, .04 ) !default;
@@ -22956,17 +23599,17 @@ $_kendo-module-meta: (
22956
23599
 
22957
23600
  @each $name, $color in $kendo-button-theme-colors {
22958
23601
  @if ($name != "base") {
22959
- $_button-text: k-contrast-legacy( $color );
22960
- $_button-bg: if( $kendo-solid-button-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-shade-bg-amount ), null );
22961
- $_button-border: if( $kendo-solid-button-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-shade-border-amount ), null );
23602
+ $_button-text: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
23603
+ $_button-bg: if($kendo-enable-color-system, k-color( $name ), if( $kendo-solid-button-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-shade-bg-amount ), null ));
23604
+ $_button-border: if($kendo-enable-color-system, k-color( $name ), if( $kendo-solid-button-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-shade-border-amount ), null ));
22962
23605
 
22963
23606
  $_button-hover-text: null;
22964
- $_button-hover-bg: if( $kendo-solid-button-hover-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-hover-shade-bg-amount ), null );
22965
- $_button-hover-border: if( $kendo-solid-button-hover-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-hover-shade-border-amount ), null );
23607
+ $_button-hover-bg: if($kendo-enable-color-system, k-color( #{$name}-hover ), if( $kendo-solid-button-hover-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-hover-shade-bg-amount ), null ));
23608
+ $_button-hover-border: if($kendo-enable-color-system, k-color( #{$name}-hover ), if( $kendo-solid-button-hover-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-hover-shade-border-amount ), null ));
22966
23609
 
22967
23610
  $_button-active-text: null;
22968
- $_button-active-bg: if( $kendo-solid-button-active-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-active-shade-bg-amount ), null );
22969
- $_button-active-border: if( $kendo-solid-button-active-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-active-shade-border-amount ), null );
23611
+ $_button-active-bg: if($kendo-enable-color-system, k-color( #{$name}-active ), if( $kendo-solid-button-active-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-active-shade-bg-amount ), null ));
23612
+ $_button-active-border: if($kendo-enable-color-system, k-color( #{$name}-active ), if( $kendo-solid-button-active-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-active-shade-border-amount ), null ));
22970
23613
 
22971
23614
  .k-button-solid-#{$name} {
22972
23615
  @include fill(
@@ -22990,7 +23633,7 @@ $_kendo-module-meta: (
22990
23633
  &:focus,
22991
23634
  &.k-focus {
22992
23635
  @if ( $kendo-solid-button-shadow ) {
22993
- @include focus-indicator( 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread rgba( $_button-border, $kendo-solid-button-shadow-opacity ), true, true );
23636
+ @include focus-indicator( 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( $name, true ), $kendo-solid-button-shadow-opacity ), rgba( $_button-border, $kendo-solid-button-shadow-opacity )), true, true );
22994
23637
  }
22995
23638
  }
22996
23639
 
@@ -23034,44 +23677,72 @@ $_kendo-module-meta: (
23034
23677
  .k-button-outline-#{$name} {
23035
23678
  @include box-shadow( none );
23036
23679
  border-color: currentColor;
23037
- color: $color;
23680
+ color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color);
23038
23681
  background-color: transparent;
23039
23682
 
23040
23683
  // Hover state
23041
23684
  &:hover,
23042
23685
  &.k-hover {
23043
- @include fill(
23044
- k-contrast-legacy( $color ),
23045
- $color,
23046
- $color
23047
- );
23686
+ @if $name == "base" {
23687
+ @include fill(
23688
+ if($kendo-enable-color-system, $kendo-base-bg, k-contrast-legacy( $color )),
23689
+ $color,
23690
+ $color
23691
+ );
23692
+ } @else {
23693
+ @include fill(
23694
+ if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
23695
+ $color,
23696
+ $color
23697
+ );
23698
+ }
23048
23699
  }
23049
23700
 
23050
23701
  // Focus state
23051
23702
  &:focus,
23052
23703
  &.k-focus {
23053
23704
  @if $kendo-outline-button-shadow {
23054
- @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread rgba( $color, $kendo-outline-button-shadow-opacity ), true, true );
23705
+ @if $name == "base" {
23706
+ @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), $kendo-outline-button-shadow-opacity ), rgba( $color, $kendo-outline-button-shadow-opacity )), true, true );
23707
+ } @else {
23708
+ @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( $name, true ), $kendo-outline-button-shadow-opacity ), rgba( $color, $kendo-outline-button-shadow-opacity )), true, true );
23709
+ }
23055
23710
  }
23056
23711
  }
23057
23712
 
23058
23713
  // Active state
23059
23714
  &:active,
23060
23715
  &.k-active {
23061
- @include fill(
23062
- k-contrast-legacy( $color ),
23063
- $color,
23064
- $color
23065
- );
23716
+ @if $name == "base" {
23717
+ @include fill(
23718
+ if($kendo-enable-color-system, $kendo-base-bg, k-contrast-legacy( $color )),
23719
+ $color,
23720
+ $color
23721
+ );
23722
+ } @else {
23723
+ @include fill(
23724
+ if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
23725
+ $color,
23726
+ $color
23727
+ );
23728
+ }
23066
23729
  }
23067
23730
 
23068
23731
  // Selected
23069
23732
  &.k-selected {
23070
- @include fill(
23071
- k-contrast-legacy( $color ),
23072
- $color,
23073
- $color
23074
- );
23733
+ @if $name == "base" {
23734
+ @include fill(
23735
+ if($kendo-enable-color-system, $kendo-base-bg, k-contrast-legacy( $color )),
23736
+ $color,
23737
+ $color
23738
+ );
23739
+ } @else {
23740
+ @include fill(
23741
+ if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
23742
+ $color,
23743
+ $color
23744
+ );
23745
+ }
23075
23746
  }
23076
23747
 
23077
23748
  // Disabled state
@@ -23105,26 +23776,42 @@ $_kendo-module-meta: (
23105
23776
  // Hover
23106
23777
  &:hover,
23107
23778
  &.k-hover {
23108
- color: k-try-shade( $color, 2 );
23779
+ @if $name == "base" {
23780
+ color: if($kendo-enable-color-system, $kendo-base-text, k-try-shade( $color, 2 ));
23781
+ } @else {
23782
+ color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 2 ));
23783
+ }
23109
23784
  }
23110
23785
 
23111
23786
  // Focus
23112
23787
  &:focus,
23113
23788
  &.k-focus {
23114
23789
  @if ( $kendo-link-button-shadow ) {
23115
- @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread rgba( $color, $kendo-link-button-shadow-opacity ), true, true );
23790
+ @if $name == "base" {
23791
+ @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), $kendo-link-button-shadow-opacity ), rgba( $color, $kendo-link-button-shadow-opacity )), true, true );
23792
+ } @else {
23793
+ @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( $name, true ), $kendo-link-button-shadow-opacity ), rgba( $color, $kendo-link-button-shadow-opacity )), true, true );
23794
+ }
23116
23795
  }
23117
23796
  }
23118
23797
 
23119
23798
  // Active
23120
23799
  &:active,
23121
23800
  &.k-active {
23122
- color: k-try-shade( $color, 2 );
23801
+ @if $name == "base" {
23802
+ color: if($kendo-enable-color-system, $kendo-base-text, k-try-shade( $color, 2 ));
23803
+ } @else {
23804
+ color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 2 ));
23805
+ }
23123
23806
  }
23124
23807
 
23125
23808
  // Selected
23126
23809
  &.k-selected {
23127
- color: k-try-shade( $color, 2 );
23810
+ @if $name == "base" {
23811
+ color: if($kendo-enable-color-system, $kendo-base-text, k-try-shade( $color, 2 ));
23812
+ } @else {
23813
+ color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 2 ));
23814
+ }
23128
23815
  }
23129
23816
 
23130
23817
  // Disabled state
@@ -23170,7 +23857,6 @@ $_kendo-module-meta: (
23170
23857
  @mixin kendo-button--theme() {
23171
23858
  @include kendo-button--theme-base();
23172
23859
  }
23173
-
23174
23860
  // #endregion
23175
23861
 
23176
23862
 
@@ -23262,31 +23948,31 @@ $kendo-menu-item-spacing: 0 !default;
23262
23948
  $kendo-menu-item-icon-spacing: $kendo-icon-spacing !default;
23263
23949
 
23264
23950
  $kendo-menu-item-bg: null !default;
23265
- $kendo-menu-item-text: rgba( $kendo-menu-text, .5 ) !default;
23951
+ $kendo-menu-item-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-menu-text, .5 )) !default;
23266
23952
  $kendo-menu-item-border: null !default;
23267
23953
  $kendo-menu-item-gradient: null !default;
23268
23954
 
23269
23955
  $kendo-menu-item-hover-bg: null !default;
23270
- $kendo-menu-item-hover-text: rgba( $kendo-menu-text, .7 ) !default;
23956
+ $kendo-menu-item-hover-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .7 ), rgba( $kendo-menu-text, .7 )) !default;
23271
23957
  $kendo-menu-item-hover-border: null !default;
23272
23958
  $kendo-menu-item-hover-gradient: null !default;
23273
23959
 
23274
23960
  $kendo-menu-item-expanded-bg: null !default;
23275
- $kendo-menu-item-expanded-text: rgba( $kendo-menu-text, .9 ) !default;
23961
+ $kendo-menu-item-expanded-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .9 ), rgba( $kendo-menu-text, .9 )) !default;
23276
23962
  $kendo-menu-item-expanded-border: null !default;
23277
23963
  $kendo-menu-item-expanded-gradient: null !default;
23278
23964
 
23279
- $kendo-menu-item-focus-shadow: inset 0 0 0 3px rgba( $kendo-menu-text, .15 ) !default;
23965
+ $kendo-menu-item-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-menu-text, .15 )) !default;
23280
23966
 
23281
23967
  $kendo-menu-separator-spacing: k-map-get( $kendo-spacing, 1 ) !default;
23282
23968
 
23283
23969
  $kendo-menu-scroll-button-bg: $kendo-menu-bg !default;
23284
- $kendo-menu-scroll-button-text: rgba( $kendo-menu-text, .5 ) !default;
23970
+ $kendo-menu-scroll-button-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-menu-text, .5 )) !default;
23285
23971
  $kendo-menu-scroll-button-border: $kendo-menu-border !default;
23286
23972
  $kendo-menu-scroll-button-gradient: null !default;
23287
23973
 
23288
23974
  $kendo-menu-scroll-button-hover-bg: null !default;
23289
- $kendo-menu-scroll-button-hover-text: rgba( $kendo-menu-text, .7 ) !default;
23975
+ $kendo-menu-scroll-button-hover-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .7 ), rgba( $kendo-menu-text, .7 )) !default;
23290
23976
  $kendo-menu-scroll-button-hover-border: null !default;
23291
23977
  $kendo-menu-scroll-button-hover-gradient: null !default;
23292
23978
 
@@ -24049,7 +24735,7 @@ $kendo-toolbar-input-width: 10em !default;
24049
24735
 
24050
24736
  /// The box shadow of the focused Toolbar item.
24051
24737
  /// @group toolbar
24052
- $kendo-toolbar-item-shadow: 0 0 0 .25rem rgba( $kendo-color-primary, .25 ) !default;
24738
+ $kendo-toolbar-item-shadow: 0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) !default;
24053
24739
 
24054
24740
  /// Border width of the flat Toolbar.
24055
24741
  /// @group toolbar
@@ -24819,7 +25505,7 @@ $kendo-input-outline-bg: null !default;
24819
25505
  $kendo-input-outline-text: $kendo-base-text !default;
24820
25506
  /// The border color of the outline Input components.
24821
25507
  /// @group input
24822
- $kendo-input-outline-border: rgba( $kendo-base-text, .5 ) !default;
25508
+ $kendo-input-outline-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-base-text, .5 )) !default;
24823
25509
 
24824
25510
  /// The background color of the outline hovered Input components.
24825
25511
  /// @group input
@@ -24919,11 +25605,18 @@ $kendo-input-spinner-icon-offset: null !default;
24919
25605
 
24920
25606
  /// The color of the Input separator.
24921
25607
  /// @group input
24922
- $kendo-input-separator-color: $kendo-input-text !default;
25608
+ $kendo-input-separator-text: $kendo-component-border !default;
24923
25609
  /// The opacity of the Input separator.
24924
25610
  /// @group input
24925
25611
  $kendo-input-separator-opacity: .5 !default;
24926
25612
 
25613
+ /// The text color of the Input prefix.
25614
+ /// @group input
25615
+ $kendo-input-prefix-text: $kendo-subtle-text !default;
25616
+ /// The text color of the Input suffix.
25617
+ /// @group input
25618
+ $kendo-input-suffix-text: $kendo-subtle-text !default;
25619
+
24927
25620
  /// The border color of the invalid Input components.
24928
25621
  /// @group input
24929
25622
  $kendo-input-invalid-border: $kendo-invalid-border !default;
@@ -24931,6 +25624,13 @@ $kendo-input-invalid-border: $kendo-invalid-border !default;
24931
25624
  /// @group input
24932
25625
  $kendo-input-invalid-shadow: $kendo-invalid-shadow !default;
24933
25626
 
25627
+ /// The border color of the valid Input components.
25628
+ /// @group input
25629
+ $kendo-input-valid-border: $kendo-valid-border !default;
25630
+ /// The shadow of the valid Input components.
25631
+ /// @group input
25632
+ $kendo-input-valid-shadow: $kendo-valid-shadow !default;
25633
+
24934
25634
  /// The background color of the Picker components.
24935
25635
  /// @group picker
24936
25636
  $kendo-picker-bg: $kendo-button-bg !default;
@@ -25003,14 +25703,14 @@ $kendo-picker-outline-bg: null !default;
25003
25703
  $kendo-picker-outline-text: $kendo-button-text !default;
25004
25704
  /// The border color of the outline Picker components.
25005
25705
  /// @group picker
25006
- $kendo-picker-outline-border: rgba( $kendo-picker-outline-text, .5 ) !default;
25706
+ $kendo-picker-outline-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-picker-outline-text, .5 )) !default;
25007
25707
 
25008
25708
  /// The background color of the outline hovered Picker components.
25009
25709
  /// @group picker
25010
25710
  $kendo-picker-outline-hover-bg: $kendo-picker-outline-text !default;
25011
25711
  /// The text color of the outline hovered Picker components.
25012
25712
  /// @group picker
25013
- $kendo-picker-outline-hover-text: k-contrast-color( $kendo-picker-outline-hover-bg ) !default;
25713
+ $kendo-picker-outline-hover-text: if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-picker-outline-hover-bg )) !default;
25014
25714
  /// The border color of the outline hovered Picker components.
25015
25715
  /// @group picker
25016
25716
  $kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg !default;
@@ -25050,7 +25750,7 @@ $kendo-picker-flat-border: $kendo-button-border !default;
25050
25750
 
25051
25751
  /// The background color of the flat hovered Picker components.
25052
25752
  /// @group picker
25053
- $kendo-picker-flat-hover-bg: rgba( $kendo-button-text, .08 ) !default;
25753
+ $kendo-picker-flat-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( $kendo-button-text, .08 )) !default;
25054
25754
  /// The text color of the flat hovered Picker components.
25055
25755
  /// @group picker
25056
25756
  $kendo-picker-flat-hover-text: null !default;
@@ -25122,10 +25822,10 @@ $kendo-tooltip-callout-size: $tooltip-arrow-height !default;
25122
25822
 
25123
25823
  /// The default background of the Tooltip.
25124
25824
  /// @group tooltip
25125
- $kendo-tooltip-bg: if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) !default;
25825
+ $kendo-tooltip-bg: if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) !default;
25126
25826
  /// The default text color of the Tooltip.
25127
25827
  /// @group tooltip
25128
- $kendo-tooltip-text: k-contrast-color( $kendo-tooltip-bg ) !default;
25828
+ $kendo-tooltip-text: if($kendo-enable-color-system, k-color( app-surface ), k-contrast-color( $kendo-tooltip-bg )) !default;
25129
25829
  /// The default border color of the Tooltip.
25130
25830
  /// @group tooltip
25131
25831
  $kendo-tooltip-border: $kendo-tooltip-bg !default;
@@ -25139,7 +25839,7 @@ $kendo-tooltip-shadow: k-elevation(2) !default;
25139
25839
 
25140
25840
  @each $name, $color in $colors {
25141
25841
  $_theme: k-map-merge(( $name: (
25142
- color: k-contrast-legacy( $color ),
25842
+ color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
25143
25843
  background-color: $color,
25144
25844
  border: $color,
25145
25845
  )), $_theme );
@@ -25154,6 +25854,7 @@ $kendo-tooltip-theme-colors: $kendo-theme-colors !default;
25154
25854
  /// The generated theme colors map for the Tooltip.
25155
25855
  /// @group tooltip
25156
25856
  $kendo-tooltip-theme: tooltip-theme( $kendo-tooltip-theme-colors ) !default;
25857
+
25157
25858
  // #endregion
25158
25859
  // #region @import "../typography/_variables.scss"; -> scss/typography/_variables.scss
25159
25860
  // File already imported_once. Skipping output.
@@ -26565,12 +27266,20 @@ $_kendo-module-meta: (
26565
27266
  .k-input-suffix {
26566
27267
  border-color: inherit;
26567
27268
  display: flex;
26568
- flex-flow: row nowrap;
26569
27269
  align-items: center;
26570
27270
  flex: none;
26571
27271
 
26572
27272
  > * {
26573
27273
  flex-shrink: 0;
27274
+ border: none;
27275
+ }
27276
+
27277
+ &-vertical {
27278
+ flex-flow: column wrap;
27279
+ }
27280
+
27281
+ &-horizontal {
27282
+ flex-flow: row wrap;
26574
27283
  }
26575
27284
  }
26576
27285
 
@@ -26578,21 +27287,32 @@ $_kendo-module-meta: (
26578
27287
  // Input separator
26579
27288
  .k-input-separator {
26580
27289
  margin: 0;
26581
- width: 0;
26582
- height: $kendo-icon-size;
26583
- border-width: 0 0 0 1px;
26584
27290
  border-style: solid;
26585
27291
  border-color: inherit;
27292
+ border-width: 0 0 0 1px;
27293
+ height: $kendo-icon-size;
26586
27294
  align-self: center;
27295
+
27296
+ &-horizontal {
27297
+ height: auto;
27298
+ margin-inline: $kendo-input-md-padding-y;
27299
+ align-self: stretch;
27300
+ border-width: 1px 0 0;
27301
+ }
27302
+
27303
+ &-vertical {
27304
+ height: auto;
27305
+ margin-block: $kendo-input-md-padding-y;
27306
+ align-self: stretch;
27307
+ border-width: 0 0 0 1px;
27308
+ }
26587
27309
  }
26588
27310
 
26589
27311
 
26590
27312
  // Input with icon styles
26591
27313
  .k-input-icon,
26592
27314
  .k-input-validation-icon,
26593
- .k-input-loading-icon,
26594
- .k-input-prefix > .k-icon,
26595
- .k-input-suffix > .k-icon {
27315
+ .k-input-loading-icon {
26596
27316
  flex: none;
26597
27317
  align-self: center;
26598
27318
  display: inline-flex;
@@ -26810,12 +27530,24 @@ $_kendo-module-meta: (
26810
27530
  .k-input-loading-icon,
26811
27531
  .k-clear-value,
26812
27532
  .k-input-prefix > .k-icon,
26813
- .k-input-suffix > .k-icon {
27533
+ .k-input-prefix > .k-input-prefix-text,
27534
+ .k-input-suffix > .k-icon,
27535
+ .k-input-suffix > .k-input-suffix-text {
26814
27536
  padding-block: $_padding-y;
26815
27537
  padding-inline: $_padding-y;
26816
27538
  box-sizing: content-box;
26817
27539
  }
26818
27540
 
27541
+ .k-input-separator {
27542
+ &-horizontal {
27543
+ margin-inline: $_padding-y;
27544
+ }
27545
+
27546
+ &-vertical {
27547
+ margin-block: $_padding-y;
27548
+ }
27549
+ }
27550
+
26819
27551
  &.k-icon-picker .k-input-inner {
26820
27552
  width: calc( #{ $_line-height * 1em } );
26821
27553
  height: calc( #{ $_line-height * 1em } );
@@ -26965,6 +27697,35 @@ $_kendo-module-meta: (
26965
27697
  }
26966
27698
  }
26967
27699
 
27700
+ // Valid
27701
+ &.k-valid {
27702
+ @include fill( $border: $kendo-input-valid-border );
27703
+
27704
+ .k-input-validation-icon {
27705
+ color: $kendo-valid-text;
27706
+ }
27707
+
27708
+ &:focus,
27709
+ &.k-focus {
27710
+ @include focus-indicator( $kendo-input-valid-shadow );
27711
+ }
27712
+ &:focus-within {
27713
+ @include focus-indicator( $kendo-input-valid-shadow );
27714
+ }
27715
+ }
27716
+
27717
+ // Prefix & Suffix
27718
+ .k-input-prefix {
27719
+ color: $kendo-input-prefix-text;
27720
+ }
27721
+
27722
+ .k-input-suffix {
27723
+ color: $kendo-input-suffix-text;
27724
+ }
27725
+
27726
+ .k-input-separator {
27727
+ border-color: $kendo-input-separator-text;
27728
+ }
26968
27729
  }
26969
27730
 
26970
27731
 
@@ -27041,6 +27802,23 @@ $_kendo-module-meta: (
27041
27802
  @include focus-indicator( $kendo-input-invalid-shadow );
27042
27803
  }
27043
27804
  }
27805
+
27806
+ // Valid
27807
+ &.k-valid {
27808
+ @include fill( $border: $kendo-input-valid-border );
27809
+
27810
+ .k-input-validation-icon {
27811
+ color: $kendo-valid-text;
27812
+ }
27813
+
27814
+ &:focus,
27815
+ &.k-focus {
27816
+ @include focus-indicator( $kendo-input-valid-shadow );
27817
+ }
27818
+ &:focus-within {
27819
+ @include focus-indicator( $kendo-input-valid-shadow );
27820
+ }
27821
+ }
27044
27822
  }
27045
27823
 
27046
27824
 
@@ -27126,6 +27904,35 @@ $_kendo-module-meta: (
27126
27904
  }
27127
27905
  }
27128
27906
 
27907
+ // Valid
27908
+ &.k-valid {
27909
+ @include fill( $border: $kendo-input-valid-border );
27910
+
27911
+ .k-input-validation-icon {
27912
+ color: $kendo-valid-text;
27913
+ }
27914
+
27915
+ &:focus,
27916
+ &.k-focus {
27917
+ @include focus-indicator( $kendo-input-valid-shadow );
27918
+ }
27919
+ &:focus-within {
27920
+ @include focus-indicator( $kendo-input-valid-shadow );
27921
+ }
27922
+ }
27923
+
27924
+ // Prefix & Suffix
27925
+ .k-input-prefix {
27926
+ color: $kendo-input-prefix-text;
27927
+ }
27928
+
27929
+ .k-input-suffix {
27930
+ color: $kendo-input-suffix-text;
27931
+ }
27932
+
27933
+ .k-input-separator {
27934
+ border-color: $kendo-input-separator-text;
27935
+ }
27129
27936
  }
27130
27937
 
27131
27938
 
@@ -27208,6 +28015,23 @@ $_kendo-module-meta: (
27208
28015
  @include focus-indicator( $kendo-input-invalid-shadow );
27209
28016
  }
27210
28017
  }
28018
+
28019
+ // Valid
28020
+ &.k-valid {
28021
+ @include fill( $border: $kendo-input-valid-border );
28022
+
28023
+ .k-input-validation-icon {
28024
+ color: $kendo-valid-text;
28025
+ }
28026
+
28027
+ &:focus,
28028
+ &.k-focus {
28029
+ @include focus-indicator( $kendo-input-valid-shadow );
28030
+ }
28031
+ &:focus-within {
28032
+ @include focus-indicator( $kendo-input-valid-shadow );
28033
+ }
28034
+ }
27211
28035
  }
27212
28036
 
27213
28037
 
@@ -27279,6 +28103,36 @@ $_kendo-module-meta: (
27279
28103
  @include focus-indicator( $kendo-input-invalid-shadow );
27280
28104
  }
27281
28105
  }
28106
+
28107
+ // Valid
28108
+ &.k-valid {
28109
+ @include fill( $border: $kendo-input-valid-border );
28110
+
28111
+ .k-input-validation-icon {
28112
+ color: $kendo-valid-text;
28113
+ }
28114
+
28115
+ &:focus,
28116
+ &.k-focus {
28117
+ @include focus-indicator( $kendo-input-valid-shadow );
28118
+ }
28119
+ &:focus-within {
28120
+ @include focus-indicator( $kendo-input-valid-shadow );
28121
+ }
28122
+ }
28123
+
28124
+ // Prefix & Suffix
28125
+ .k-input-prefix {
28126
+ color: $kendo-input-prefix-text;
28127
+ }
28128
+
28129
+ .k-input-suffix {
28130
+ color: $kendo-input-suffix-text;
28131
+ }
28132
+
28133
+ .k-input-separator {
28134
+ border-color: $kendo-input-separator-text;
28135
+ }
27282
28136
  }
27283
28137
 
27284
28138
 
@@ -27361,6 +28215,23 @@ $_kendo-module-meta: (
27361
28215
  @include focus-indicator( $kendo-input-invalid-shadow );
27362
28216
  }
27363
28217
  }
28218
+
28219
+ // Valid
28220
+ &.k-valid {
28221
+ @include fill( $border: $kendo-input-valid-border );
28222
+
28223
+ .k-input-validation-icon {
28224
+ color: $kendo-valid-text;
28225
+ }
28226
+
28227
+ &:focus,
28228
+ &.k-focus {
28229
+ @include focus-indicator( $kendo-input-valid-shadow );
28230
+ }
28231
+ &:focus-within {
28232
+ @include focus-indicator( $kendo-input-valid-shadow );
28233
+ }
28234
+ }
27364
28235
  }
27365
28236
 
27366
28237
  }
@@ -27485,8 +28356,8 @@ $kendo-floating-label-focus-text: null !default;
27485
28356
  white-space: nowrap;
27486
28357
  text-overflow: ellipsis;
27487
28358
  position: absolute;
27488
- top: $kendo-floating-label-offset-y;
27489
- left: $kendo-floating-label-offset-x;
28359
+ top: var(--kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y});
28360
+ left: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
27490
28361
  overflow: hidden;
27491
28362
  cursor: text;
27492
28363
  transform-origin: left center;
@@ -27500,8 +28371,8 @@ $kendo-floating-label-focus-text: null !default;
27500
28371
 
27501
28372
  &.k-empty {
27502
28373
  > .k-label {
27503
- top: $kendo-floating-label-offset-y;
27504
- left: $kendo-floating-label-offset-x;
28374
+ top: var(--kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y});
28375
+ left: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
27505
28376
  transform: scale( $kendo-floating-label-scale );
27506
28377
  pointer-events: none;
27507
28378
  }
@@ -27509,13 +28380,13 @@ $kendo-floating-label-focus-text: null !default;
27509
28380
 
27510
28381
  > .k-label,
27511
28382
  &.k-focus > .k-label {
27512
- top: $kendo-floating-label-focus-offset-y;
27513
- left: $kendo-floating-label-focus-offset-x;
28383
+ top: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
28384
+ left: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
27514
28385
  transform: scale( $kendo-floating-label-focus-scale );
27515
28386
  }
27516
28387
  &:focus-within > .k-label {
27517
- top: $kendo-floating-label-focus-offset-y;
27518
- left: $kendo-floating-label-focus-offset-x;
28388
+ top: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
28389
+ left: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
27519
28390
  transform: scale( $kendo-floating-label-focus-scale );
27520
28391
  }
27521
28392
 
@@ -27535,18 +28406,18 @@ $kendo-floating-label-focus-text: null !default;
27535
28406
  &.k-empty {
27536
28407
  > .k-label {
27537
28408
  left: auto;
27538
- right: $kendo-floating-label-offset-x;
28409
+ right: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
27539
28410
  }
27540
28411
  }
27541
28412
 
27542
28413
  > .k-label,
27543
28414
  &.k-focus > .k-label {
27544
28415
  left: auto;
27545
- right: $kendo-floating-label-focus-offset-x;
28416
+ right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
27546
28417
  }
27547
28418
  &:focus-within > .k-label {
27548
28419
  left: auto;
27549
- right: $kendo-floating-label-focus-offset-x;
28420
+ right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
27550
28421
  }
27551
28422
  }
27552
28423
  }
@@ -28771,7 +29642,7 @@ $kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default;
28771
29642
 
28772
29643
  .k-progressbar-indeterminate {
28773
29644
  @include fill( $kendo-progressbar-indeterminate-text, $kendo-progressbar-indeterminate-bg, $kendo-progressbar-indeterminate-border );
28774
- @include striped-gradient( k-color-shade($kendo-progressbar-indeterminate-bg) );
29645
+ @include striped-gradient( if($kendo-enable-color-system, rgba( k-color( base-emphasis, true ), .55 ), k-color-shade($kendo-progressbar-indeterminate-bg)) );
28775
29646
  background-size: $kendo-progressbar-height $kendo-progressbar-height;
28776
29647
  animation: kendo-progressbar-indeterminate-animation $kendo-progressbar-animation-timing;
28777
29648
  }
@@ -29468,21 +30339,21 @@ $kendo-slider-draghandle-active-scale: 1 !default;
29468
30339
  $kendo-slider-draghandle-active-size: null !default;
29469
30340
 
29470
30341
  $kendo-slider-draghandle-bg: $kendo-color-primary !default;
29471
- $kendo-slider-draghandle-text: k-contrast-color( $kendo-color-primary ) !default;
30342
+ $kendo-slider-draghandle-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary )) !default;
29472
30343
  $kendo-slider-draghandle-border: $kendo-color-primary !default;
29473
30344
  $kendo-slider-draghandle-gradient: null !default;
29474
30345
 
29475
- $kendo-slider-draghandle-hover-bg: k-try-darken( $kendo-color-primary, 7.5% ) !default;
29476
- $kendo-slider-draghandle-hover-text: k-contrast-color( $kendo-color-primary ) !default;
29477
- $kendo-slider-draghandle-hover-border: k-try-darken( $kendo-color-primary, 10% ) !default;
30346
+ $kendo-slider-draghandle-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-darken( $kendo-color-primary, 7.5% )) !default;
30347
+ $kendo-slider-draghandle-hover-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary )) !default;
30348
+ $kendo-slider-draghandle-hover-border: if($kendo-enable-color-system, k-color( primary-hover ), k-try-darken( $kendo-color-primary, 10% )) !default;
29478
30349
  $kendo-slider-draghandle-hover-gradient: null !default;
29479
30350
 
29480
- $kendo-slider-draghandle-pressed-bg: k-try-darken( $kendo-color-primary, 10% ) !default;
29481
- $kendo-slider-draghandle-pressed-text: k-contrast-color( $kendo-color-primary ) !default;
29482
- $kendo-slider-draghandle-pressed-border: k-try-darken( $kendo-color-primary, 12.5% ) !default;
30351
+ $kendo-slider-draghandle-pressed-bg: if($kendo-enable-color-system, k-color( primary-active ), k-try-darken( $kendo-color-primary, 10% )) !default;
30352
+ $kendo-slider-draghandle-pressed-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary )) !default;
30353
+ $kendo-slider-draghandle-pressed-border: if($kendo-enable-color-system, k-color( primary-active ), k-try-darken( $kendo-color-primary, 12.5% )) !default;
29483
30354
  $kendo-slider-draghandle-pressed-gradient: null !default;
29484
30355
 
29485
- $kendo-slider-draghandle-focus-shadow: 0 0 0 3px rgba( $kendo-color-primary, .5 ) !default;
30356
+ $kendo-slider-draghandle-focus-shadow: 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( primary, true ), .5 ), rgba( $kendo-color-primary, .5 )) !default;
29486
30357
 
29487
30358
  $kendo-slider-transition-speed: .3s !default;
29488
30359
  $kendo-slider-transition-function: ease-out !default;
@@ -30146,7 +31017,7 @@ $kendo-calendar-cell-selected-hover-border: $kendo-selected-hover-border !defaul
30146
31017
  $kendo-calendar-cell-selected-hover-gradient: null !default;
30147
31018
 
30148
31019
  $kendo-calendar-cell-focus-shadow: inset $kendo-button-focus-shadow !default;
30149
- $kendo-calendar-cell-selected-focus-shadow: inset 0 0 0 2px rgba( k-color-darken( $kendo-color-primary, 12.5% ), .5 ) !default;
31020
+ $kendo-calendar-cell-selected-focus-shadow: inset 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary-active, true ), .5 ), rgba( k-color-darken( $kendo-color-primary, 12.5% ), .5 )) !default;
30150
31021
 
30151
31022
 
30152
31023
  // Calendar navigation
@@ -30897,7 +31768,7 @@ $kendo-calendar-sizes: (
30897
31768
  .k-calendar { // stylelint-disable-line
30898
31769
 
30899
31770
  $kendo-calendar-range-gap: 1px !default;
30900
- $kendo-calendar-range-bg: rgba( $kendo-calendar-cell-selected-bg, .25 );
31771
+ $kendo-calendar-range-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-calendar-cell-selected-bg, .25 ));
30901
31772
  $kendo-calendar-range-split-size: 5px !default;
30902
31773
 
30903
31774
  .k-range-start,
@@ -34503,7 +35374,7 @@ $kendo-treeview-item-selected-gradient: null !default;
34503
35374
 
34504
35375
  /// The box shadow of focused TreeView items.
34505
35376
  /// @group treeview
34506
- $kendo-treeview-item-focus-shadow: inset 0 0 0 2px rgba( $kendo-treeview-text, .15 ) !default;
35377
+ $kendo-treeview-item-focus-shadow: inset 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-treeview-text, .15 )) !default;
34507
35378
 
34508
35379
  /// The background color of the Load More button in the TreeView.
34509
35380
  /// @group treeview
@@ -34914,6 +35785,22 @@ $kendo-dropdowntree-popup-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
34914
35785
  }
34915
35786
  }
34916
35787
 
35788
+ .k-multiselecttree {
35789
+ .k-input-values {
35790
+ width: auto;
35791
+ max-width: 100%;
35792
+ }
35793
+
35794
+ .k-input-inner::before {
35795
+ content: "\200b";
35796
+ width: 0px;
35797
+ overflow: hidden;
35798
+ flex: none;
35799
+ display: inline-block;
35800
+ vertical-align: top;
35801
+ }
35802
+ }
35803
+
34917
35804
  }
34918
35805
 
34919
35806
 
@@ -35543,17 +36430,17 @@ $kendo-switch-off-track-focus-bg: null !default;
35543
36430
  $kendo-switch-off-track-focus-text: null !default;
35544
36431
  /// The border color of the track when the focused Switch is not checked.
35545
36432
  /// @group switch
35546
- $kendo-switch-off-track-focus-border: k-color-mix( $kendo-switch-off-track-bg, $kendo-color-primary ) !default;
36433
+ $kendo-switch-off-track-focus-border: if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-mix( $kendo-switch-off-track-bg, $kendo-color-primary )) !default;
35547
36434
  /// The background gradient of the track when the focused Switch is not checked.
35548
36435
  /// @group switch
35549
36436
  $kendo-switch-off-track-focus-gradient: null !default;
35550
36437
  /// The ring around the track when the focused Switch is not checked.
35551
36438
  /// @group switch
35552
- $kendo-switch-off-track-focus-ring: .25rem solid rgba( $kendo-color-primary, .25 ) !default;
36439
+ $kendo-switch-off-track-focus-ring: .25rem solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) !default;
35553
36440
 
35554
36441
  /// The background of the track when the disabled Switch is not checked.
35555
36442
  /// @group switch
35556
- $kendo-switch-off-track-disabled-bg: if( $kendo-is-dark-theme, $gray-800, $gray-200 ) !default;
36443
+ $kendo-switch-off-track-disabled-bg: if($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $gray-800, $gray-200 )) !default;
35557
36444
  /// The text color of the track when the disabled Switch is not checked.
35558
36445
  /// @group switch
35559
36446
  $kendo-switch-off-track-disabled-text: null !default;
@@ -35631,11 +36518,11 @@ $kendo-switch-on-track-focus-border: null !default;
35631
36518
  $kendo-switch-on-track-focus-gradient: null !default;
35632
36519
  /// The ring around the track when the focused Switch is checked.
35633
36520
  /// @group switch
35634
- $kendo-switch-on-track-focus-ring: .25rem solid rgba( $kendo-switch-on-track-border, .25 ) !default;
36521
+ $kendo-switch-on-track-focus-ring: .25rem solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-switch-on-track-border, .25 )) !default;
35635
36522
 
35636
36523
  /// The background of the track when the disabled Switch is checked.
35637
36524
  /// @group switch
35638
- $kendo-switch-on-track-disabled-bg: k-try-tint( $kendo-switch-on-track-bg, 50% ) !default;
36525
+ $kendo-switch-on-track-disabled-bg: if($kendo-enable-color-system, rgba( k-color( primary ), .5 ), k-try-tint( $kendo-switch-on-track-bg, 50% )) !default;
35639
36526
  /// The text color of the track when the disabled Switch is checked.
35640
36527
  /// @group switch
35641
36528
  $kendo-switch-on-track-disabled-text: null !default;
@@ -35648,7 +36535,7 @@ $kendo-switch-on-track-disabled-gradient: null !default;
35648
36535
 
35649
36536
  /// The background of the thumb when the Switch is checked.
35650
36537
  /// @group switch
35651
- $kendo-switch-on-thumb-bg: k-contrast-color( $kendo-switch-on-track-bg ) !default;
36538
+ $kendo-switch-on-thumb-bg: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-switch-on-track-bg )) !default;
35652
36539
  /// The text color of the thumb when the Switch is checked.
35653
36540
  /// @group switch
35654
36541
  $kendo-switch-on-thumb-text: null !default;
@@ -35912,7 +36799,7 @@ $kendo-switch-on-thumb-hover-gradient: null !default;
35912
36799
  $kendo-switch-off-track-focus-gradient
35913
36800
  );
35914
36801
  @if $kendo-enable-focus-contrast {
35915
- @include box-shadow( 0 0 0 2px if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) );
36802
+ @include box-shadow( 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
35916
36803
  } @else {
35917
36804
  outline: $kendo-switch-off-track-focus-ring;
35918
36805
  }
@@ -35992,7 +36879,7 @@ $kendo-switch-on-thumb-hover-gradient: null !default;
35992
36879
  $kendo-switch-on-track-focus-gradient
35993
36880
  );
35994
36881
  @if $kendo-enable-focus-contrast {
35995
- @include box-shadow( 0 0 0 2px if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) );
36882
+ @include box-shadow( 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
35996
36883
  } @else {
35997
36884
  outline: $kendo-switch-on-track-focus-ring;
35998
36885
  }
@@ -36139,7 +37026,7 @@ $kendo-dropzone-line-height: $kendo-line-height-md !default;
36139
37026
 
36140
37027
  /// The background color of the DropZone.
36141
37028
  /// @group dropzone
36142
- $kendo-dropzone-bg: if( k-is-light( $kendo-component-bg ), $gray-100, $gray-900 ) !default;
37029
+ $kendo-dropzone-bg: if($kendo-enable-color-system, k-color( surface ), if( k-is-light( $kendo-component-bg ), $gray-100, $gray-900 )) !default;
36143
37030
  /// The text color of the DropZone.
36144
37031
  /// @group dropzone
36145
37032
  $kendo-dropzone-text: $kendo-component-text !default;
@@ -36152,7 +37039,7 @@ $kendo-dropzone-border: $kendo-component-border !default;
36152
37039
  $kendo-dropzone-icon-spacing: k-map-get( $kendo-spacing, 6 ) !default;
36153
37040
  /// The text color of the DropZone icon.
36154
37041
  /// @group dropzone
36155
- $kendo-dropzone-icon-text: k-try-tint( $kendo-dropzone-text, 8 ) !default;
37042
+ $kendo-dropzone-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 8 )) !default;
36156
37043
  /// The text color of the hovered DropZone icon.
36157
37044
  /// @group dropzone
36158
37045
  $kendo-dropzone-icon-hover-text: $kendo-color-primary !default;
@@ -36356,7 +37243,7 @@ $kendo-upload-dropzone-bg: $kendo-component-header-bg !default;
36356
37243
  $kendo-upload-dropzone-border: $kendo-upload-border !default;
36357
37244
  /// The background color of the hovered Upload dropzone.
36358
37245
  /// @group upload
36359
- $kendo-upload-dropzone-hover-bg: k-try-shade( $kendo-upload-dropzone-bg, .2 ) !default;
37246
+ $kendo-upload-dropzone-hover-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-upload-dropzone-bg, .2 )) !default;
36360
37247
 
36361
37248
  /// The text color of the Upload status message.
36362
37249
  /// @group upload
@@ -36884,14 +37771,14 @@ $kendo-appbar-gap: k-map-get( $kendo-spacing, 2 ) !default;
36884
37771
  $kendo-appbar-light-bg: $kendo-color-light !default;
36885
37772
  /// The text color of the AppBar based on light theme color.
36886
37773
  /// @group appbar
36887
- $kendo-appbar-light-text: k-contrast-color( $kendo-color-light ) !default;
37774
+ $kendo-appbar-light-text: if($kendo-enable-color-system, k-color( on-light ), k-contrast-color( $kendo-color-light )) !default;
36888
37775
 
36889
37776
  /// The background color of the AppBar based on dark theme color.
36890
37777
  /// @group appbar
36891
37778
  $kendo-appbar-dark-bg: $kendo-color-dark !default;
36892
37779
  /// The text color of the AppBar based on dark theme color.
36893
37780
  /// @group appbar
36894
- $kendo-appbar-dark-text: k-contrast-color( $kendo-color-dark ) !default;
37781
+ $kendo-appbar-dark-text: if($kendo-enable-color-system, k-color( on-dark ), k-contrast-color( $kendo-color-dark )) !default;
36895
37782
 
36896
37783
  /// The box shadow of the AppBar.
36897
37784
  /// @group appbar
@@ -37051,7 +37938,7 @@ $kendo-appbar-bottom-box-shadow: k-elevation(4) !default;
37051
37938
  color: $kendo-appbar-dark-text;
37052
37939
  background-color: $kendo-appbar-dark-bg;
37053
37940
  } @else {
37054
- color: k-contrast-legacy( $color );
37941
+ color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
37055
37942
  background-color: $color;
37056
37943
  }
37057
37944
  }
@@ -37472,7 +38359,7 @@ $kendo-fab-item-outline-color: $kendo-button-bg !default;
37472
38359
  outline: $kendo-fab-border-width $kendo-fab-outline-style $color;
37473
38360
  outline-offset: -$kendo-fab-border-width;
37474
38361
  border-color: $color;
37475
- color: k-contrast-legacy( $color );
38362
+ color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
37476
38363
  background-color: $color;
37477
38364
  }
37478
38365
  }
@@ -37481,8 +38368,8 @@ $kendo-fab-item-outline-color: $kendo-button-bg !default;
37481
38368
  @each $name, $color in $kendo-fab-theme-colors {
37482
38369
  .k-hover.k-fab-solid-#{$name},
37483
38370
  .k-fab-solid-#{$name}:hover {
37484
- border-color: k-try-shade( $color, .5 );
37485
- background-color: k-try-shade( $color, .5 );
38371
+ border-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 ));
38372
+ background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 ));
37486
38373
  }
37487
38374
  }
37488
38375
 
@@ -37493,7 +38380,7 @@ $kendo-fab-item-outline-color: $kendo-button-bg !default;
37493
38380
  @if $kendo-enable-focus-contrast {
37494
38381
  @include box-shadow( inset 0 0 0 2px currentColor );
37495
38382
  } @else {
37496
- outline: $kendo-fab-outline-style $kendo-fab-outline-width rgba( $color, .3 );
38383
+ outline: $kendo-fab-outline-style $kendo-fab-outline-width if($kendo-enable-color-system, rgba( k-color( $name, true ), .3 ), rgba( $color, .3 ));
37497
38384
  }
37498
38385
  }
37499
38386
  }
@@ -37504,8 +38391,8 @@ $kendo-fab-item-outline-color: $kendo-button-bg !default;
37504
38391
  .k-selected.k-fab-solid-#{$name},
37505
38392
  .k-fab-solid-#{$name}:active {
37506
38393
  @include box-shadow($kendo-fab-active-shadow);
37507
- border-color: k-try-shade( $color, 1.5);
37508
- background-color: k-try-shade( $color, 1.5);
38394
+ border-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5));
38395
+ background-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5));
37509
38396
  }
37510
38397
  }
37511
38398
 
@@ -37514,8 +38401,8 @@ $kendo-fab-item-outline-color: $kendo-button-bg !default;
37514
38401
  .k-disabled.k-fab-solid-#{$name},
37515
38402
  .k-fab-solid-#{$name}:disabled {
37516
38403
  @include box-shadow($kendo-fab-disabled-shadow);
37517
- background-color: k-try-tint( $color, 5 );
37518
- color: k-try-tint( k-contrast-legacy( $color ), 5 );
38404
+ background-color: if($kendo-enable-color-system, rgba( k-color( $name, true ), .6 ), k-try-tint( $color, 5 ));
38405
+ color: if($kendo-enable-color-system, rgba( k-color( on-#{$name}, true ), .6 ), k-try-tint( k-contrast-legacy( $color ), 5 ));
37519
38406
  opacity: 1;
37520
38407
  }
37521
38408
  }
@@ -37544,8 +38431,8 @@ $kendo-fab-item-outline-color: $kendo-button-bg !default;
37544
38431
  // Hover state
37545
38432
  .k-fab-item.k-hover .k-fab-item-icon,
37546
38433
  .k-fab-item:hover .k-fab-item-icon {
37547
- border-color: k-try-shade( $kendo-fab-item-icon-border, .5 );
37548
- background-color: k-try-shade( $kendo-fab-item-icon-bg, .5 );
38434
+ border-color: if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-fab-item-icon-border, .5 ));
38435
+ background-color: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-fab-item-icon-bg, .5 ));
37549
38436
  }
37550
38437
 
37551
38438
  // Focus state
@@ -37554,7 +38441,7 @@ $kendo-fab-item-outline-color: $kendo-button-bg !default;
37554
38441
  .k-fab-item.k-focus .k-fab-item-text,
37555
38442
  .k-fab-item.k-focus .k-fab-item-icon {
37556
38443
  @if $kendo-enable-focus-contrast {
37557
- @include box-shadow( inset 0 0 0 2px if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) );
38444
+ @include box-shadow( inset 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
37558
38445
  } @else {
37559
38446
  outline: $kendo-fab-item-outline-style $kendo-fab-item-outline-width $kendo-fab-item-outline-color;
37560
38447
  }
@@ -37564,8 +38451,8 @@ $kendo-fab-item-outline-color: $kendo-button-bg !default;
37564
38451
  .k-fab-item.k-active .k-fab-item-icon,
37565
38452
  .k-fab-item:active .k-fab-item-icon {
37566
38453
  @include box-shadow($kendo-fab-item-active-shadow);
37567
- border-color: k-try-shade( $kendo-fab-item-icon-border, 1);
37568
- background-color: k-try-shade( $kendo-fab-item-icon-bg, 1);
38454
+ border-color: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-fab-item-icon-border, 1 ));
38455
+ background-color: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-fab-item-icon-bg, 1 ));
37569
38456
  }
37570
38457
 
37571
38458
  // Disabled state
@@ -37576,8 +38463,8 @@ $kendo-fab-item-outline-color: $kendo-button-bg !default;
37576
38463
  .k-fab-item-text,
37577
38464
  .k-fab-item-icon {
37578
38465
  @include box-shadow($kendo-fab-item-disabled-shadow);
37579
- background-color: k-try-tint( $kendo-fab-item-bg, 5 );
37580
- color: k-try-tint( $kendo-fab-item-text, 5 );
38466
+ background-color: if($kendo-enable-color-system, rgba( k-color( base, true ), .6 ), k-try-tint( $kendo-fab-item-bg, 5 ));
38467
+ color: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .6 ), k-try-tint( $kendo-fab-item-text, 5 ));
37581
38468
  }
37582
38469
  }
37583
38470
 
@@ -37605,7 +38492,7 @@ $kendo-fab-item-outline-color: $kendo-button-bg !default;
37605
38492
  outline: $kendo-fab-border-width $kendo-fab-outline-style $color;
37606
38493
  outline-offset: -$kendo-fab-border-width;
37607
38494
  border-color: $color;
37608
- color: k-contrast-color( $color );
38495
+ color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-color( $color ));
37609
38496
  background-color: $color;
37610
38497
  }
37611
38498
  }
@@ -37614,9 +38501,9 @@ $kendo-fab-item-outline-color: $kendo-button-bg !default;
37614
38501
  @each $name, $color in $kendo-fab-theme-colors {
37615
38502
  .k-fab-solid-#{$name}:hover,
37616
38503
  .k-fab-solid-#{$name}.k-hover {
37617
- border-color: k-color-darken( $color, 10% );
37618
- color: k-contrast-color( k-color-darken( $color, 7.5% ) );
37619
- background-color: k-color-darken( $color, 7.5% );
38504
+ border-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-color-darken( $color, 10% ));
38505
+ color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-color( k-color-darken( $color, 7.5% ) ));
38506
+ background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-color-darken( $color, 7.5% ));
37620
38507
  }
37621
38508
  }
37622
38509
 
@@ -37624,7 +38511,7 @@ $kendo-fab-item-outline-color: $kendo-button-bg !default;
37624
38511
  @each $name, $color in $kendo-fab-theme-colors {
37625
38512
  .k-fab-solid-#{$name}:focus,
37626
38513
  .k-fab-solid-#{$name}.k-focus {
37627
- outline: $kendo-fab-outline-width $kendo-fab-outline-style rgba( $color, .5 );
38514
+ outline: $kendo-fab-outline-width $kendo-fab-outline-style if($kendo-enable-color-system, rgba( k-color( $name, true ), .5 ), rgba( $color, .5 ));
37628
38515
  }
37629
38516
  }
37630
38517
 
@@ -37634,9 +38521,9 @@ $kendo-fab-item-outline-color: $kendo-button-bg !default;
37634
38521
  .k-fab-solid-#{$name}.k-active,
37635
38522
  .k-fab-solid-#{$name}.k-selected {
37636
38523
  @include box-shadow( $kendo-fab-active-shadow );
37637
- border-color: k-color-darken( $color, 12.5% );
37638
- color: k-contrast-color( k-color-darken( $color, 10% ) );
37639
- background-color: k-color-darken( $color, 10% );
38524
+ border-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-color-darken( $color, 12.5% ));
38525
+ color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-color( k-color-darken( $color, 10% ) ));
38526
+ background-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-color-darken( $color, 10% ));
37640
38527
  }
37641
38528
  }
37642
38529
 
@@ -37645,8 +38532,8 @@ $kendo-fab-item-outline-color: $kendo-button-bg !default;
37645
38532
  .k-fab-solid-#{$name}:disabled,
37646
38533
  .k-fab-solid-#{$name}.k-disabled {
37647
38534
  @include box-shadow( $kendo-fab-disabled-shadow );
37648
- background-color: k-try-tint( $color, 4.5 );
37649
- color: k-try-tint( k-contrast-color( $color ), 5 );
38535
+ background-color: if($kendo-enable-color-system, rgba( k-color( $name, true ), .65 ), k-try-tint( $color, 4.5 ));
38536
+ color: if($kendo-enable-color-system, rgba( k-color( on-#{$name}, true ), .65 ), k-try-tint( k-contrast-color( $color ), 5 ));
37650
38537
  opacity: 1;
37651
38538
  }
37652
38539
  }
@@ -37675,11 +38562,11 @@ $kendo-fab-item-outline-color: $kendo-button-bg !default;
37675
38562
  .k-fab-item:hover .k-fab-item-icon,
37676
38563
  .k-fab-item.k-hover .k-fab-item-icon {
37677
38564
  @include box-shadow( $kendo-fab-item-shadow );
37678
- outline: $kendo-fab-border-width $kendo-fab-item-outline-style k-try-darken( $kendo-fab-item-icon-border, 10% );
38565
+ outline: $kendo-fab-border-width $kendo-fab-item-outline-style if($kendo-enable-color-system, k-color( base-hover ), k-try-darken( $kendo-fab-item-icon-border, 10% ));
37679
38566
  outline-offset: -$kendo-fab-border-width;
37680
- border-color: k-color-darken( $kendo-fab-item-icon-border, 10% );
37681
- color: k-contrast-color( k-color-darken( $kendo-fab-item-icon-bg, 7.5% ) );
37682
- background-color: k-color-darken( $kendo-fab-item-icon-bg, 7.5% );
38567
+ border-color: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-fab-item-icon-border, 10% ));
38568
+ color: if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( k-color-darken( $kendo-fab-item-icon-bg, 7.5% ) ));
38569
+ background-color: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-fab-item-icon-bg, 7.5% ));
37683
38570
  }
37684
38571
 
37685
38572
  // Focus state
@@ -37687,18 +38574,18 @@ $kendo-fab-item-outline-color: $kendo-button-bg !default;
37687
38574
  .k-fab-item.k-focus .k-fab-item-text,
37688
38575
  .k-fab-item:focus .k-fab-item-icon,
37689
38576
  .k-fab-item.k-focus .k-fab-item-icon {
37690
- outline: $kendo-fab-item-outline-width $kendo-fab-item-outline-style rgba( $kendo-fab-item-icon-border, .5 );
38577
+ outline: $kendo-fab-item-outline-width $kendo-fab-item-outline-style if($kendo-enable-color-system, rgba( k-color( base, true ), .5 ), rgba( $kendo-fab-item-icon-border, .5 ));
37691
38578
  }
37692
38579
 
37693
38580
  // Active state
37694
38581
  .k-fab-item:active .k-fab-item-icon,
37695
38582
  .k-fab-item.k-active .k-fab-item-icon {
37696
38583
  @include box-shadow( $kendo-fab-item-active-shadow );
37697
- outline: $kendo-fab-border-width solid k-color-darken( $kendo-fab-item-icon-border, 12.5% );
38584
+ outline: $kendo-fab-border-width solid if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-fab-item-icon-border, 12.5% ));
37698
38585
  outline-offset: -$kendo-fab-border-width;
37699
- border-color: k-color-darken( $kendo-fab-item-icon-border, 12.5% );
37700
- color: k-contrast-color( k-color-darken( $kendo-fab-item-icon-bg, 10% ) );
37701
- background-color: k-color-darken( $kendo-fab-item-icon-bg, 10% );
38586
+ border-color: if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-fab-item-icon-border, 12.5% ));
38587
+ color: if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( k-color-darken( $kendo-fab-item-icon-bg, 10% ) ));
38588
+ background-color: if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-fab-item-icon-bg, 10% ));
37702
38589
  }
37703
38590
 
37704
38591
  // Disabled state
@@ -37709,8 +38596,8 @@ $kendo-fab-item-outline-color: $kendo-button-bg !default;
37709
38596
  .k-fab-item-text,
37710
38597
  .k-fab-item-icon {
37711
38598
  @include box-shadow( $kendo-fab-item-disabled-shadow );
37712
- background-color: k-try-tint( $kendo-fab-item-bg, 8 );
37713
- color: k-try-tint( $kendo-fab-item-text, 8 );
38599
+ background-color: if($kendo-enable-color-system, rgba( k-color( base, true ), .65 ), k-try-tint( $kendo-fab-item-bg, 8 ));
38600
+ color: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .65 ), k-try-tint( $kendo-fab-item-text, 8 ));
37714
38601
  }
37715
38602
  }
37716
38603
 
@@ -38683,7 +39570,7 @@ $_kendo-module-meta: (
38683
39570
  // Window theme colors
38684
39571
  @each $name, $color in $kendo-window-theme-colors {
38685
39572
  .k-window-#{$name} .k-window-titlebar {
38686
- color: k-contrast-legacy( $color );
39573
+ color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
38687
39574
  background-color: $color;
38688
39575
  }
38689
39576
  }
@@ -38864,7 +39751,7 @@ $kendo-dialog-theme-colors: (
38864
39751
  // Dialog theme colors
38865
39752
  @each $name, $color in $kendo-dialog-theme-colors {
38866
39753
  .k-dialog-#{$name} .k-dialog-titlebar {
38867
- color: k-contrast-legacy( $color );
39754
+ color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
38868
39755
  background-color: $color;
38869
39756
  }
38870
39757
  }
@@ -38981,7 +39868,7 @@ $kendo-drawer-focus-shadow: inset 0 0 0 2px rgba( black, .15 ) !default;
38981
39868
 
38982
39869
  $kendo-drawer-selected-bg: $kendo-selected-bg !default;
38983
39870
  $kendo-drawer-selected-text: $kendo-selected-text !default;
38984
- $kendo-drawer-selected-hover-bg: k-try-shade( $kendo-selected-bg, 1 ) !default;
39871
+ $kendo-drawer-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-selected-bg, 1 )) !default;
38985
39872
  $kendo-drawer-selected-hover-text: $kendo-selected-text !default;
38986
39873
 
38987
39874
  // #endregion
@@ -39050,6 +39937,7 @@ $kendo-drawer-selected-hover-text: $kendo-selected-text !default;
39050
39937
  }
39051
39938
  .k-drawer-content {
39052
39939
  flex: 1 1 auto;
39940
+ overflow: auto;
39053
39941
  }
39054
39942
 
39055
39943
 
@@ -39424,9 +40312,9 @@ $kendo-notification-icon-spacing: $kendo-icon-spacing !default;
39424
40312
 
39425
40313
  @each $name, $color in $colors {
39426
40314
  $_theme: k-map-merge(( $name: (
39427
- color: k-color-shade( $color, 6 ),
39428
- background-color: k-color-tint( $color, 9 ),
39429
- border: k-color-tint( $color, 10 ),
40315
+ color: if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-color-shade( $color, 6 )),
40316
+ background-color: if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-color-tint( $color, 9 )),
40317
+ border: if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-color-tint( $color, 10 )),
39430
40318
  )), $_theme );
39431
40319
  }
39432
40320
 
@@ -40030,6 +40918,10 @@ $kendo-card-callout-height: 1.3em !default;
40030
40918
  gap: $kendo-card-actions-gap;
40031
40919
  }
40032
40920
 
40921
+ .k-card-horizontal .k-actions-horizontal {
40922
+ width: auto;
40923
+ }
40924
+
40033
40925
  // List
40034
40926
  .k-card-list {
40035
40927
  display: flex;
@@ -40254,9 +41146,9 @@ $kendo-card-callout-height: 1.3em !default;
40254
41146
  // Card theme colors
40255
41147
  @each $name, $color in $kendo-theme-colors {
40256
41148
  .k-card-#{$name} {
40257
- background-color: k-color-tint($color, 10);
40258
- color: k-color-shade($color, 6);
40259
- border-color: k-color-tint($color, 9);
41149
+ background-color: if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-color-tint($color, 10));
41150
+ color: if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-color-shade($color, 6));
41151
+ border-color: if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-color-tint($color, 9));
40260
41152
 
40261
41153
  .k-card-subtitle {
40262
41154
  color: inherit;
@@ -40978,17 +41870,17 @@ $kendo-bottom-nav-flat-border: $kendo-component-border !default;
40978
41870
  @each $name, $color in $kendo-theme-colors {
40979
41871
  .k-bottom-nav-solid-#{$name} {
40980
41872
  @include fill(
40981
- $color: k-true-mix( $color, k-contrast-legacy( $color ), 35%),
41873
+ $color: if($kendo-enable-color-system, rgba( k-color( on-#{$name}, true ), .65 ), k-true-mix( $color, k-contrast-legacy( $color ), 35%)),
40982
41874
  $bg: $color
40983
41875
  );
40984
41876
 
40985
41877
  .k-bottom-nav-item.k-focus,
40986
41878
  .k-bottom-nav-item:focus {
40987
- @include fill( $bg: rgba(k-true-mix( $color, k-contrast-legacy( $color ), 35%), .2));
41879
+ @include fill( $bg: if($kendo-enable-color-system, rgba( k-color( on-#{$name}, true ), .125 ), rgba(k-true-mix( $color, k-contrast-legacy( $color ), 35%), .2)));
40988
41880
  }
40989
41881
 
40990
41882
  .k-bottom-nav-item.k-selected {
40991
- @include fill( $color: k-contrast-legacy( $color ) );
41883
+ @include fill( $color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )) );
40992
41884
  }
40993
41885
  }
40994
41886
  // TODO: remove when suites update class names
@@ -41008,12 +41900,12 @@ $kendo-bottom-nav-flat-border: $kendo-component-border !default;
41008
41900
 
41009
41901
  .k-bottom-nav-item.k-focus,
41010
41902
  .k-bottom-nav-item:focus {
41011
- @include fill( $bg: rgba($kendo-bottom-nav-flat-text, .05) );
41903
+ @include fill( $bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05), rgba($kendo-bottom-nav-flat-text, .05)) );
41012
41904
  }
41013
41905
 
41014
41906
  .k-bottom-nav-item.k-selected {
41015
41907
  @if $name == "secondary" or $name == "light" {
41016
- @include fill( $color: k-try-shade($color, 3) );
41908
+ @include fill( $color: if($kendo-enable-color-system, k-color( #{$name} ), k-try-shade($color, 3)) );
41017
41909
  } @else {
41018
41910
  @include fill( $color: $color );
41019
41911
  }
@@ -41252,7 +42144,7 @@ $kendo-breadcrumb-link-focus-text: null !default;
41252
42144
  $kendo-breadcrumb-link-focus-border: null !default;
41253
42145
  /// The box shadow of the focused Breadcrumb link.
41254
42146
  /// @group breadcrumb
41255
- $kendo-breadcrumb-link-focus-shadow: inset 0 0 0 3px rgba( $kendo-breadcrumb-text, .25 ) !default;
42147
+ $kendo-breadcrumb-link-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .25 ), rgba( $kendo-breadcrumb-text, .25 )) !default;
41256
42148
 
41257
42149
  /// The background color of the Breadcrumb root link.
41258
42150
  /// @group breadcrumb
@@ -41791,7 +42683,7 @@ $kendo-pager-item-focus-opacity: null !default;
41791
42683
  $kendo-pager-item-focus-bg: $kendo-pager-item-bg !default;
41792
42684
  /// The box shadow of the focused Pager items.
41793
42685
  /// @group pager
41794
- $kendo-pager-item-focus-shadow: 0 0 0 3px rgba($kendo-color-primary, .25) !default;
42686
+ $kendo-pager-item-focus-shadow: 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-color-primary, .25)) !default;
41795
42687
 
41796
42688
  /// The border radius of the Pager numbers.
41797
42689
  /// @group pager
@@ -42168,24 +43060,24 @@ $kendo-stepper-indicator-bg: $kendo-component-bg !default;
42168
43060
  $kendo-stepper-indicator-text: $kendo-component-text !default;
42169
43061
  $kendo-stepper-indicator-border: $kendo-component-border !default;
42170
43062
 
42171
- $kendo-stepper-indicator-hover-bg: k-try-shade( $kendo-stepper-indicator-bg ) !default;
43063
+ $kendo-stepper-indicator-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-stepper-indicator-bg )) !default;
42172
43064
  $kendo-stepper-indicator-hover-text: null !default;
42173
43065
  $kendo-stepper-indicator-hover-border: null !default;
42174
43066
 
42175
43067
  $kendo-stepper-indicator-disabled-bg: null !default;
42176
- $kendo-stepper-indicator-disabled-text: $kendo-disabled-text !default;
43068
+ $kendo-stepper-indicator-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .65 ), $kendo-disabled-text) !default;
42177
43069
  $kendo-stepper-indicator-disabled-border: null !default;
42178
43070
 
42179
43071
  $kendo-stepper-indicator-done-bg: $kendo-color-primary !default;
42180
- $kendo-stepper-indicator-done-text: k-contrast-color( $kendo-stepper-indicator-done-bg ) !default;
43072
+ $kendo-stepper-indicator-done-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg )) !default;
42181
43073
  $kendo-stepper-indicator-done-border: $kendo-stepper-indicator-done-bg !default;
42182
43074
 
42183
- $kendo-stepper-indicator-done-hover-bg: k-try-shade( $kendo-stepper-indicator-done-bg ) !default;
43075
+ $kendo-stepper-indicator-done-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg )) !default;
42184
43076
  $kendo-stepper-indicator-done-hover-text: null !default;
42185
43077
  $kendo-stepper-indicator-done-hover-border: null !default;
42186
43078
 
42187
- $kendo-stepper-indicator-done-disabled-bg: k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%) !default;
42188
- $kendo-stepper-indicator-done-disabled-text: k-contrast-color( $kendo-stepper-indicator-done-bg ) !default;
43079
+ $kendo-stepper-indicator-done-disabled-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .6 ), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%)) !default;
43080
+ $kendo-stepper-indicator-done-disabled-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg )) !default;
42189
43081
  $kendo-stepper-indicator-done-disabled-border: $kendo-stepper-indicator-done-disabled-bg !default;
42190
43082
 
42191
43083
  $kendo-stepper-indicator-current-bg: $kendo-stepper-indicator-done-bg !default;
@@ -42204,7 +43096,7 @@ $kendo-stepper-label-text: null !default;
42204
43096
  $kendo-stepper-label-success-text: $kendo-color-success !default;
42205
43097
  $kendo-stepper-label-error-text: $kendo-color-error !default;
42206
43098
  $kendo-stepper-label-hover-text: null !default;
42207
- $kendo-stepper-label-disabled-text: $kendo-disabled-text !default;
43099
+ $kendo-stepper-label-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .65 ), $kendo-disabled-text) !default;
42208
43100
 
42209
43101
  $kendo-stepper-optional-label-text: $kendo-subtle-text !default;
42210
43102
  $kendo-stepper-optional-label-opacity: null !default;
@@ -42299,6 +43191,17 @@ $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0m
42299
43191
  transition-duration: .4s;
42300
43192
  transition-timing-function: ease-in-out;
42301
43193
 
43194
+ &::before {
43195
+ @include border-radius( $kendo-stepper-indicator-border-radius );
43196
+ content: "";
43197
+ width: 100%;
43198
+ height: 100%;
43199
+ position: absolute;
43200
+ top: 0;
43201
+ left: 0;
43202
+ z-index: -1;
43203
+ }
43204
+
42302
43205
  &::after {
42303
43206
  @include border-radius( 100% );
42304
43207
  content: "";
@@ -42559,11 +43462,23 @@ $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0m
42559
43462
  &.k-disabled,
42560
43463
  &:disabled {
42561
43464
  .k-step-indicator {
42562
- @include fill(
42563
- $kendo-stepper-indicator-disabled-text,
42564
- $kendo-stepper-indicator-disabled-bg,
42565
- $kendo-stepper-indicator-disabled-border
42566
- );
43465
+ @if($kendo-enable-color-system) {
43466
+ @include fill(
43467
+ $kendo-stepper-indicator-disabled-text,
43468
+ k-color( app-surface ),
43469
+ $kendo-stepper-indicator-disabled-border
43470
+ );
43471
+
43472
+ &::before {
43473
+ background-color: $kendo-stepper-indicator-disabled-bg;
43474
+ }
43475
+ } @else {
43476
+ @include fill(
43477
+ $kendo-stepper-indicator-disabled-text,
43478
+ $kendo-stepper-indicator-disabled-bg,
43479
+ $kendo-stepper-indicator-disabled-border
43480
+ );
43481
+ }
42567
43482
  }
42568
43483
 
42569
43484
  .k-step-label {
@@ -42621,11 +43536,23 @@ $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0m
42621
43536
  &.k-disabled,
42622
43537
  &:disabled {
42623
43538
  .k-step-indicator {
42624
- @include fill(
42625
- $kendo-stepper-indicator-done-disabled-text,
42626
- $kendo-stepper-indicator-done-disabled-bg,
42627
- $kendo-stepper-indicator-done-disabled-border
42628
- );
43539
+ @if($kendo-enable-color-system) {
43540
+ @include fill(
43541
+ $kendo-stepper-indicator-done-disabled-text,
43542
+ k-color( app-surface ),
43543
+ $kendo-stepper-indicator-done-disabled-border
43544
+ );
43545
+
43546
+ &::before {
43547
+ background-color: $kendo-stepper-indicator-done-disabled-bg;
43548
+ }
43549
+ } @else {
43550
+ @include fill(
43551
+ $kendo-stepper-indicator-done-disabled-text,
43552
+ $kendo-stepper-indicator-done-disabled-bg,
43553
+ $kendo-stepper-indicator-done-disabled-border
43554
+ );
43555
+ }
42629
43556
  }
42630
43557
  }
42631
43558
  }
@@ -42662,11 +43589,23 @@ $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0m
42662
43589
  &.k-disabled,
42663
43590
  &:disabled {
42664
43591
  .k-step-indicator {
42665
- @include fill(
42666
- $kendo-stepper-indicator-current-disabled-text,
42667
- $kendo-stepper-indicator-current-disabled-bg,
42668
- $kendo-stepper-indicator-current-disabled-border
42669
- );
43592
+ @if($kendo-enable-color-system) {
43593
+ @include fill(
43594
+ $kendo-stepper-indicator-current-disabled-text,
43595
+ k-color( app-surface ),
43596
+ $kendo-stepper-indicator-current-disabled-border
43597
+ );
43598
+
43599
+ &::before {
43600
+ background-color: $kendo-stepper-indicator-current-disabled-bg;
43601
+ }
43602
+ } @else {
43603
+ @include fill(
43604
+ $kendo-stepper-indicator-current-disabled-text,
43605
+ $kendo-stepper-indicator-current-disabled-bg,
43606
+ $kendo-stepper-indicator-current-disabled-border
43607
+ );
43608
+ }
42670
43609
  }
42671
43610
  }
42672
43611
  }
@@ -44039,7 +44978,7 @@ $kendo-panelbar-header-text: $kendo-link-text !default;
44039
44978
  $kendo-panelbar-header-border: null !default;
44040
44979
  $kendo-panelbar-header-gradient: null !default;
44041
44980
 
44042
- $kendo-panelbar-header-hover-bg: k-try-shade( $kendo-panelbar-header-bg, .5 ) !default;
44981
+ $kendo-panelbar-header-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-panelbar-header-bg, .5 )) !default;
44043
44982
  $kendo-panelbar-header-hover-text: null !default;
44044
44983
  $kendo-panelbar-header-hover-border: null !default;
44045
44984
  $kendo-panelbar-header-hover-gradient: null !default;
@@ -44060,7 +44999,7 @@ $kendo-panelbar-header-selected-text: $kendo-selected-text !default;
44060
44999
  $kendo-panelbar-header-selected-border: null !default;
44061
45000
  $kendo-panelbar-header-selected-gradient: null !default;
44062
45001
 
44063
- $kendo-panelbar-header-selected-hover-bg: k-try-shade( $kendo-panelbar-header-selected-bg ) !default;
45002
+ $kendo-panelbar-header-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-header-selected-bg )) !default;
44064
45003
  $kendo-panelbar-header-selected-hover-text: null !default;
44065
45004
  $kendo-panelbar-header-selected-hover-border: null !default;
44066
45005
  $kendo-panelbar-header-selected-hover-gradient: null !default;
@@ -44075,7 +45014,7 @@ $kendo-panelbar-header-selected-hover-focus-text: null !default;
44075
45014
  $kendo-panelbar-header-selected-hover-focus-border: null !default;
44076
45015
  $kendo-panelbar-header-selected-hover-focus-gradient: null !default;
44077
45016
 
44078
- $kendo-panelbar-item-hover-bg: k-try-shade( $kendo-panelbar-bg, 1 ) !default;
45017
+ $kendo-panelbar-item-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-bg, 1 )) !default;
44079
45018
  $kendo-panelbar-item-hover-text: null !default;
44080
45019
  $kendo-panelbar-item-hover-border: null !default;
44081
45020
  $kendo-panelbar-item-hover-gradient: null !default;
@@ -44096,7 +45035,7 @@ $kendo-panelbar-item-selected-text: $kendo-selected-text !default;
44096
45035
  $kendo-panelbar-item-selected-border: null !default;
44097
45036
  $kendo-panelbar-item-selected-gradient: null !default;
44098
45037
 
44099
- $kendo-panelbar-item-selected-hover-bg: k-try-shade( $kendo-panelbar-item-selected-bg ) !default;
45038
+ $kendo-panelbar-item-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-item-selected-bg )) !default;
44100
45039
  $kendo-panelbar-item-selected-hover-text: null !default;
44101
45040
  $kendo-panelbar-item-selected-hover-border: null !default;
44102
45041
  $kendo-panelbar-item-selected-hover-gradient: null !default;
@@ -44587,7 +45526,7 @@ $kendo-splitter-collapse-icon-padding-y: k-map-get( $kendo-spacing, .5 ) !defaul
44587
45526
  $kendo-splitbar-bg: $kendo-base-bg !default;
44588
45527
  $kendo-splitbar-text: $kendo-base-text !default;
44589
45528
 
44590
- $kendo-splitbar-hover-bg: k-try-shade( $kendo-splitbar-bg, .5 ) !default;
45529
+ $kendo-splitbar-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-splitbar-bg, .5 )) !default;
44591
45530
  $kendo-splitbar-hover-text: $kendo-splitbar-text !default;
44592
45531
 
44593
45532
  $kendo-splitbar-selected-bg: $kendo-selected-bg !default;
@@ -45199,7 +46138,7 @@ $kendo-dock-manager-dock-preview-border-style: dashed !default;
45199
46138
  $kendo-dock-manager-dock-preview-border-radius: $kendo-border-radius-sm !default;
45200
46139
  /// The background color of the dropping area in the DockManager component.
45201
46140
  /// @group dock-manager
45202
- $kendo-dock-manager-dock-preview-bg: rgba( $kendo-color-primary, .16 ) !default;
46141
+ $kendo-dock-manager-dock-preview-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 )) !default;
45203
46142
  /// The border color of the dropping area in the DockManager component.
45204
46143
  /// @group dock-manager
45205
46144
  $kendo-dock-manager-dock-preview-border: $kendo-color-primary !default;
@@ -45611,7 +46550,7 @@ $kendo-adaptive-content-bg: $kendo-app-bg !default;
45611
46550
  $kendo-adaptive-content-text: $kendo-app-text !default;
45612
46551
 
45613
46552
  $kendo-adaptive-menu-bg: $kendo-color-primary !default;
45614
- $kendo-adaptive-menu-text: k-contrast-color( $kendo-adaptive-menu-bg ) !default;
46553
+ $kendo-adaptive-menu-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-adaptive-menu-bg )) !default;
45615
46554
 
45616
46555
  $kendo-adaptive-menu-clear-text: $kendo-color-primary !default;
45617
46556
 
@@ -46551,10 +47490,10 @@ $kendo-grid-selection-aggregates-line-height: $kendo-grid-line-height !default;
46551
47490
  /// @group grid
46552
47491
  $kendo-grid-selection-aggregates-font-weight: $kendo-font-weight-bold !default;
46553
47492
 
46554
- $kendo-grid-grouping-row-bg: k-try-shade( $kendo-grid-bg ) !default;
47493
+ $kendo-grid-grouping-row-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-grid-bg )) !default;
46555
47494
  $kendo-grid-grouping-row-text: $kendo-grid-text !default;
46556
47495
 
46557
- $kendo-grid-sorted-bg: rgba( k-contrast-color( $kendo-grid-bg ), .02 ) !default;
47496
+ $kendo-grid-sorted-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .02 ), rgba( k-contrast-color( $kendo-grid-bg ), .02 )) !default;
46558
47497
  $kendo-grid-sorting-indicator-text: $kendo-color-primary !default;
46559
47498
  $kendo-grid-sorting-index-font-size: ($kendo-icon-size * .75) !default;
46560
47499
  $kendo-grid-sorting-index-height: $kendo-icon-size !default;
@@ -46569,11 +47508,13 @@ $kendo-grid-command-cell-button-spacing: k-map-get( $kendo-spacing, 2 ) !default
46569
47508
  // be cautious when changing the next line; see https://github.com/MoOx/reduce-css-calc/issues/38
46570
47509
  $kendo-grid-command-cell-padding-y: calc( #{$kendo-grid-cell-padding-y} - (#{$kendo-button-calc-size} - #{$kendo-line-height-em}) / 2 ) !default;
46571
47510
 
47511
+ // Must be a solid color
46572
47512
  $kendo-grid-sticky-bg: $kendo-grid-bg !default;
46573
47513
  $kendo-grid-sticky-text: $kendo-grid-text !default;
46574
- $kendo-grid-sticky-border: rgba($kendo-grid-text, .5) !default;
47514
+ $kendo-grid-sticky-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba($kendo-grid-text, .5)) !default;
46575
47515
 
46576
- $kendo-grid-sticky-alt-bg: k-try-shade( $kendo-grid-bg, .5 ) !default;
47516
+ // Must be a solid color
47517
+ $kendo-grid-sticky-alt-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-grid-bg, .5 )) !default;
46577
47518
 
46578
47519
  $kendo-grid-sticky-header-bg: $kendo-grid-header-bg !default;
46579
47520
  $kendo-grid-sticky-header-text: $kendo-grid-header-text !default;
@@ -46582,11 +47523,12 @@ $kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default;
46582
47523
  $kendo-grid-sticky-footer-bg: $kendo-grid-header-bg !default;
46583
47524
  $kendo-grid-sticky-footer-hover-bg: $kendo-grid-sticky-footer-bg !default;
46584
47525
 
46585
- $kendo-grid-sticky-selected-bg: k-color-mix( $kendo-selected-bg, $kendo-grid-bg, 25% ) !default;
46586
- $kendo-grid-sticky-selected-alt-bg: k-color-shade( $kendo-grid-sticky-selected-bg, .4 ) !default;
47526
+ $kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), k-color-mix( $kendo-selected-bg, $kendo-grid-bg, 25% )) !default;
47527
+ $kendo-grid-sticky-selected-alt-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .24 ), k-color-shade( $kendo-grid-sticky-selected-bg, .4 )) !default;
46587
47528
 
46588
- $kendo-grid-sticky-hover-bg: k-try-shade( $kendo-grid-bg ) !default;
46589
- $kendo-grid-sticky-selected-hover-bg: k-color-shade( $kendo-grid-sticky-selected-bg, .7 ) !default;
47529
+ // Must be a solid color
47530
+ $kendo-grid-sticky-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-grid-bg )) !default;
47531
+ $kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .24 ), k-color-shade( $kendo-grid-sticky-selected-bg, .7 )) !default;
46590
47532
 
46591
47533
  $kendo-grid-column-menu-width: 250px !default;
46592
47534
  $kendo-grid-column-menu-max-width: 320px !default;
@@ -46637,7 +47579,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
46637
47579
 
46638
47580
  /// Background color of the grid row resize indicator
46639
47581
  /// @group grid
46640
- $kendo-grid-row-resizer-hover-bg: rgba( k-contrast-color( $kendo-grid-bg ), .12 ) !default;
47582
+ $kendo-grid-row-resizer-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) !default;
46641
47583
  /// Active background color of the grid row resize indicator
46642
47584
  /// @group grid
46643
47585
  $kendo-grid-row-resizer-active-bg: $kendo-color-primary !default;
@@ -47428,6 +48370,16 @@ $kendo-grid-row-resizer-height: k-map-get( $kendo-spacing, .5 ) !default;
47428
48370
  }
47429
48371
  }
47430
48372
 
48373
+ .k-master-row .k-grid-content-sticky::before {
48374
+ content: "";
48375
+ width: 100%;
48376
+ height: 100%;
48377
+ position: absolute;
48378
+ top: 0;
48379
+ left: 0;
48380
+ z-index: -1;
48381
+ }
48382
+
47431
48383
  kendo-grid {
47432
48384
  .k-table-row.k-grid-row-sticky {
47433
48385
  border: 0;
@@ -48285,14 +49237,30 @@ $kendo-grid-row-resizer-height: k-map-get( $kendo-spacing, .5 ) !default;
48285
49237
  &.k-table-row.k-selected .k-table-td.k-grid-row-sticky,
48286
49238
  &.k-table-row td.k-grid-content-sticky.k-selected,
48287
49239
  &.k-table-row .k-table-td.k-grid-content-sticky.k-selected {
48288
- @include fill( $bg: $kendo-grid-sticky-selected-bg );
49240
+ @if($kendo-enable-color-system) {
49241
+ @include fill( $bg: $kendo-grid-sticky-bg );
49242
+
49243
+ &::before {
49244
+ @include fill( $bg: $kendo-grid-sticky-selected-bg );
49245
+ }
49246
+ } @else {
49247
+ @include fill( $bg: $kendo-grid-sticky-selected-bg );
49248
+ }
48289
49249
  }
48290
49250
 
48291
49251
  &.k-selected.k-table-alt-row td.k-grid-content-sticky,
48292
49252
  &.k-selected.k-table-alt-row .k-table-td.k-grid-row-sticky,
48293
49253
  &.k-table-alt-row td.k-grid-content-sticky.k-selected,
48294
49254
  &.k-table-alt-row .k-table-td.k-grid-content-sticky.k-selected {
48295
- @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
49255
+ @if($kendo-enable-color-system) {
49256
+ @include fill( $bg: $kendo-grid-sticky-alt-bg );
49257
+
49258
+ &::before {
49259
+ @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
49260
+ }
49261
+ } @else {
49262
+ @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
49263
+ }
48296
49264
  }
48297
49265
 
48298
49266
 
@@ -48314,7 +49282,15 @@ $kendo-grid-row-resizer-height: k-map-get( $kendo-spacing, .5 ) !default;
48314
49282
  &.k-hover td.k-grid-content-sticky.k-selected,
48315
49283
  &:hover .k-table-td.k-grid-content-sticky.k-selected,
48316
49284
  &.k-hover .k-table-td.k-grid-content-sticky.k-selected {
48317
- background-color: $kendo-grid-sticky-selected-hover-bg;
49285
+ @if($kendo-enable-color-system) {
49286
+ background-color: $kendo-grid-sticky-hover-bg;
49287
+
49288
+ &::before {
49289
+ background-color: $kendo-grid-sticky-selected-hover-bg;
49290
+ }
49291
+ } @else {
49292
+ background-color: $kendo-grid-sticky-selected-hover-bg;
49293
+ }
48318
49294
  }
48319
49295
  }
48320
49296
 
@@ -48360,14 +49336,30 @@ $kendo-grid-row-resizer-height: k-map-get( $kendo-spacing, .5 ) !default;
48360
49336
  .k-selected.k-grid-row-sticky .k-table-td,
48361
49337
  .k-grid-row-sticky .k-table-td.k-selected,
48362
49338
  .k-selected.k-grid-content-sticky {
48363
- @include fill( $bg: $kendo-grid-sticky-selected-bg );
49339
+ @if($kendo-enable-color-system) {
49340
+ @include fill( $bg: $kendo-grid-sticky-bg );
49341
+
49342
+ &::before {
49343
+ @include fill( $bg: $kendo-grid-sticky-selected-bg );
49344
+ }
49345
+ } @else {
49346
+ @include fill( $bg: $kendo-grid-sticky-selected-bg );
49347
+ }
48364
49348
  }
48365
49349
 
48366
49350
  .k-table-row.k-selected.k-table-alt-row .k-grid-content-sticky,
48367
49351
  .k-selected.k-table-alt-row.k-grid-row-sticky td,
48368
49352
  .k-selected.k-table-alt-row.k-grid-row-sticky .k-table-td,
48369
49353
  .k-table-alt-row .k-selected.k-grid-content-sticky {
48370
- @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
49354
+ @if($kendo-enable-color-system) {
49355
+ @include fill( $bg: $kendo-grid-sticky-alt-bg );
49356
+
49357
+ &::before {
49358
+ @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
49359
+ }
49360
+ } @else {
49361
+ @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
49362
+ }
48371
49363
  }
48372
49364
 
48373
49365
  // Hover state
@@ -48405,7 +49397,15 @@ $kendo-grid-row-resizer-height: k-map-get( $kendo-spacing, .5 ) !default;
48405
49397
  .k-grid-row-sticky.k-hover .k-table-td.k-selected,
48406
49398
  .k-table-row:hover .k-grid-content-sticky.k-selected,
48407
49399
  .k-table-row.k-hover .k-grid-content-sticky.k-selected {
48408
- background-color: $kendo-grid-sticky-selected-hover-bg;
49400
+ @if($kendo-enable-color-system) {
49401
+ background-color: $kendo-grid-sticky-hover-bg;
49402
+
49403
+ &::before {
49404
+ background-color: $kendo-grid-sticky-selected-hover-bg;
49405
+ }
49406
+ } @else {
49407
+ background-color: $kendo-grid-sticky-selected-hover-bg;
49408
+ }
48409
49409
  }
48410
49410
  }
48411
49411
 
@@ -48729,14 +49729,30 @@ $kendo-grid-row-resizer-height: k-map-get( $kendo-spacing, .5 ) !default;
48729
49729
  &.k-table-row.k-selected .k-table-td.k-grid-row-sticky,
48730
49730
  &.k-table-row td.k-grid-content-sticky.k-selected,
48731
49731
  &.k-table-row .k-table-td.k-grid-content-sticky.k-selected {
48732
- @include fill( $bg: $kendo-grid-sticky-selected-bg );
49732
+ @if($kendo-enable-color-system) {
49733
+ @include fill( $bg: $kendo-grid-sticky-bg );
49734
+
49735
+ &::before {
49736
+ @include fill( $bg: $kendo-grid-sticky-selected-bg );
49737
+ }
49738
+ } @else {
49739
+ @include fill( $bg: $kendo-grid-sticky-selected-bg );
49740
+ }
48733
49741
  }
48734
49742
 
48735
49743
  &.k-selected.k-table-alt-row td.k-grid-content-sticky,
48736
49744
  &.k-selected.k-table-alt-row .k-table-td.k-grid-row-sticky,
48737
49745
  &.k-table-alt-row td.k-grid-content-sticky.k-selected,
48738
49746
  &.k-table-alt-row .k-table-td.k-grid-content-sticky.k-selected {
48739
- @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
49747
+ @if($kendo-enable-color-system) {
49748
+ @include fill( $bg: $kendo-grid-sticky-alt-bg );
49749
+
49750
+ &::before {
49751
+ @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
49752
+ }
49753
+ } @else {
49754
+ @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
49755
+ }
48740
49756
  }
48741
49757
 
48742
49758
 
@@ -48758,7 +49774,15 @@ $kendo-grid-row-resizer-height: k-map-get( $kendo-spacing, .5 ) !default;
48758
49774
  &.k-hover td.k-grid-content-sticky.k-selected,
48759
49775
  &:hover .k-table-td.k-grid-content-sticky.k-selected,
48760
49776
  &.k-hover .k-table-td.k-grid-content-sticky.k-selected {
48761
- background-color: $kendo-grid-sticky-selected-hover-bg;
49777
+ @if($kendo-enable-color-system) {
49778
+ background-color: $kendo-grid-sticky-hover-bg;
49779
+
49780
+ &::before {
49781
+ background-color: $kendo-grid-sticky-selected-hover-bg;
49782
+ }
49783
+ } @else {
49784
+ background-color: $kendo-grid-sticky-selected-hover-bg;
49785
+ }
48762
49786
  }
48763
49787
  }
48764
49788
 
@@ -48802,14 +49826,30 @@ $kendo-grid-row-resizer-height: k-map-get( $kendo-spacing, .5 ) !default;
48802
49826
  .k-selected.k-grid-row-sticky .k-table-td,
48803
49827
  .k-grid-row-sticky .k-table-td.k-selected,
48804
49828
  .k-selected.k-grid-content-sticky {
48805
- @include fill( $bg: $kendo-grid-sticky-selected-bg );
49829
+ @if($kendo-enable-color-system) {
49830
+ @include fill( $bg: $kendo-grid-sticky-bg );
49831
+
49832
+ &::before {
49833
+ @include fill( $bg: $kendo-grid-sticky-selected-bg );
49834
+ }
49835
+ } @else {
49836
+ @include fill( $bg: $kendo-grid-sticky-selected-bg );
49837
+ }
48806
49838
  }
48807
49839
 
48808
49840
  .k-table-row.k-selected.k-table-alt-row .k-grid-content-sticky,
48809
49841
  .k-selected.k-table-alt-row.k-grid-row-sticky td,
48810
49842
  .k-selected.k-table-alt-row.k-grid-row-sticky .k-table-td,
48811
49843
  .k-table-alt-row .k-selected.k-grid-content-sticky {
48812
- @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
49844
+ @if($kendo-enable-color-system) {
49845
+ @include fill( $bg: $kendo-grid-sticky-alt-bg );
49846
+
49847
+ &::before {
49848
+ @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
49849
+ }
49850
+ } @else {
49851
+ @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
49852
+ }
48813
49853
  }
48814
49854
 
48815
49855
  // Hover state
@@ -48847,7 +49887,15 @@ $kendo-grid-row-resizer-height: k-map-get( $kendo-spacing, .5 ) !default;
48847
49887
  .k-grid-row-sticky.k-hover .k-table-td.k-selected,
48848
49888
  .k-table-row:hover .k-grid-content-sticky.k-selected,
48849
49889
  .k-table-row.k-hover .k-grid-content-sticky.k-selected {
48850
- background-color: $kendo-grid-sticky-selected-hover-bg;
49890
+ @if($kendo-enable-color-system) {
49891
+ background-color: $kendo-grid-sticky-hover-bg;
49892
+
49893
+ &::before {
49894
+ background-color: $kendo-grid-sticky-selected-hover-bg;
49895
+ }
49896
+ } @else {
49897
+ background-color: $kendo-grid-sticky-selected-hover-bg;
49898
+ }
48851
49899
  }
48852
49900
  }
48853
49901
 
@@ -49100,7 +50148,7 @@ $kendo-listview-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
49100
50148
  $kendo-listview-item-selected-text: null !default;
49101
50149
  /// The background color of the selected ListView items.
49102
50150
  /// @group listview
49103
- $kendo-listview-item-selected-bg: rgba( $kendo-selected-bg, .25 ) !default;
50151
+ $kendo-listview-item-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
49104
50152
  /// The border color of the selected ListView items.
49105
50153
  /// @group listview
49106
50154
  $kendo-listview-item-selected-border: null !default;
@@ -49116,7 +50164,8 @@ $kendo-listview-item-focus-bg: null !default;
49116
50164
  $kendo-listview-item-focus-border: null !default;
49117
50165
  /// The box shadow of the focused ListView items.
49118
50166
  /// @group listview
49119
- $kendo-listview-item-focus-shadow: inset 0 0 0 3px rgba( $kendo-listview-text, .15 ) !default;
50167
+ $kendo-listview-item-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-listview-text, .15 )) !default;
50168
+
49120
50169
  // #endregion
49121
50170
  // #region @import "./_layout.scss"; -> scss/listview/_layout.scss
49122
50171
  // #region @import "@progress/kendo-theme-default/scss/listview/_layout.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-default/scss/listview/_layout.scss
@@ -49479,7 +50528,7 @@ $kendo-spreadsheet-formula-input-line-height: $kendo-input-line-height !default;
49479
50528
  $kendo-spreadsheet-view-font-family: Arial, Verdana, sans-serif !default;
49480
50529
  $kendo-spreadsheet-view-font-size: $kendo-spreadsheet-font-size !default;
49481
50530
 
49482
- $kendo-spreadsheet-selection-bg: rgba( $kendo-selected-bg, .25 ) !default;
50531
+ $kendo-spreadsheet-selection-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
49483
50532
  $kendo-spreadsheet-selection-text: null !default;
49484
50533
  $kendo-spreadsheet-selection-border: $kendo-selected-bg !default;
49485
50534
  $kendo-spreadsheet-selection-shadow: inset 0 0 0 1px $kendo-selected-bg !default;
@@ -49488,12 +50537,12 @@ $kendo-spreadsheet-single-selection-bg: $kendo-selected-bg !default;
49488
50537
  $kendo-spreadsheet-single-selection-text: null !default;
49489
50538
  $kendo-spreadsheet-single-selection-border: $kendo-spreadsheet-bg !default;
49490
50539
 
49491
- $kendo-spreadsheet-partial-selection-bg: rgba( $kendo-selected-bg, .25 ) !default;
50540
+ $kendo-spreadsheet-partial-selection-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
49492
50541
 
49493
50542
  $kendo-spreadsheet-active-cell-bg: $kendo-spreadsheet-bg !default;
49494
50543
  $kendo-spreadsheet-active-cell-shadow: inset 0 0 0 1px $kendo-selected-bg !default;
49495
50544
 
49496
- $kendo-spreadsheet-auto-fill-bg: rgba( $kendo-selected-bg, .25 ) !default;
50545
+ $kendo-spreadsheet-auto-fill-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
49497
50546
  $kendo-spreadsheet-auto-fill-text: null !default;
49498
50547
  $kendo-spreadsheet-auto-fill-border: $kendo-selected-bg !default;
49499
50548
  $kendo-spreadsheet-auto-fill-shadow: inset 0 0 0 1px $kendo-selected-bg !default;
@@ -49543,7 +50592,7 @@ $kendo-spreadsheet-drawing-handle-border-radius: $kendo-border-radius-lg !defaul
49543
50592
  $kendo-spreadsheet-drawing-outline-style: solid !default;
49544
50593
  $kendo-spreadsheet-drawing-outline-width: 2px !default;
49545
50594
 
49546
- $kendo-spreadsheet-drawing-anchor-bg: rgba( $kendo-selected-bg, .25 ) !default;
50595
+ $kendo-spreadsheet-drawing-anchor-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
49547
50596
 
49548
50597
  $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 4 ) !default;
49549
50598
 
@@ -50799,21 +51848,21 @@ $kendo-pivotgrid-bg: $kendo-component-bg !default;
50799
51848
  $kendo-pivotgrid-text: $kendo-component-text !default;
50800
51849
  $kendo-pivotgrid-border: $kendo-component-border !default;
50801
51850
 
50802
- $kendo-pivotgrid-alt-border: k-try-shade( $kendo-pivotgrid-border, 2 ) !default;
51851
+ $kendo-pivotgrid-alt-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-pivotgrid-border, 2 )) !default;
50803
51852
 
50804
51853
  $kendo-pivotgrid-headers-bg: $kendo-component-header-bg !default;
50805
51854
  $kendo-pivotgrid-headers-text: $kendo-component-header-text !default;
50806
51855
  $kendo-pivotgrid-headers-border: $kendo-component-header-border !default;
50807
51856
 
50808
- $kendo-pivotgrid-total-bg: k-try-shade( $kendo-pivotgrid-bg, 1 ) !default;
51857
+ $kendo-pivotgrid-total-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-pivotgrid-bg, 1 )) !default;
50809
51858
  $kendo-pivotgrid-total-text: $kendo-component-header-text !default;
50810
51859
  $kendo-pivotgrid-total-border: $kendo-component-header-border !default;
50811
51860
 
50812
- $kendo-pivotgrid-hover-bg: k-color-darken( $kendo-pivotgrid-bg, 7% ) !default;
51861
+ $kendo-pivotgrid-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-color-darken( $kendo-pivotgrid-bg, 7% )) !default;
50813
51862
  $kendo-pivotgrid-hover-text: null !default;
50814
51863
  $kendo-pivotgrid-hover-border: null !default;
50815
51864
 
50816
- $kendo-pivotgrid-selected-bg: rgba( $kendo-selected-bg, .25 ) !default;
51865
+ $kendo-pivotgrid-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
50817
51866
  $kendo-pivotgrid-selected-text: null !default;
50818
51867
  $kendo-pivotgrid-selected-border: null !default;
50819
51868
 
@@ -50882,7 +51931,7 @@ $kendo-pivotgrid-alt-text: $kendo-grid-header-text !default;
50882
51931
  $kendo-pivotgrid-chrome-border: $kendo-grid-border !default;
50883
51932
 
50884
51933
  $kendo-pivotgrid-container-bg: $kendo-component-header-bg !default;
50885
- $kendo-pivotgrid-row-headers-bg: k-try-shade( $kendo-component-header-bg, .5 ) !default;
51934
+ $kendo-pivotgrid-row-headers-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-component-header-bg, .5 )) !default;
50886
51935
 
50887
51936
  $kendo-pivotgrid-button-bg: null !default;
50888
51937
  $kendo-pivotgrid-button-text: null !default;
@@ -52166,7 +53215,8 @@ $kendo-filter-preview-operator-text: $kendo-subtle-text !default;
52166
53215
 
52167
53216
  /// The box shadow of the focused Filter toolbar.
52168
53217
  /// @group filter
52169
- $kendo-filter-toolbar-focus-shadow: 0 0 0 .25rem rgba( $kendo-color-primary, .25 ) !default;
53218
+ $kendo-filter-toolbar-focus-shadow: 0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) !default;
53219
+
52170
53220
  // #endregion
52171
53221
  // #region @import "./_layout.scss"; -> scss/filter/_layout.scss
52172
53222
  // #region @import "@progress/kendo-theme-default/scss/filter/_layout.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-default/scss/filter/_layout.scss
@@ -52532,7 +53582,7 @@ $kendo-file-manager-listview-item-border: null !default;
52532
53582
  $kendo-file-manager-listview-item-icon-bg: null !default;
52533
53583
  /// The text color of the FileManager ListView item icon.
52534
53584
  /// @group filemanager
52535
- $kendo-file-manager-listview-item-icon-text: k-try-tint( $kendo-file-manager-text, 4 ) !default;
53585
+ $kendo-file-manager-listview-item-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-file-manager-text, 4 )) !default;
52536
53586
  /// The border color of the FileManager ListView item icon.
52537
53587
  /// @group filemanager
52538
53588
  $kendo-file-manager-listview-item-icon-border: null !default;
@@ -52589,7 +53639,7 @@ $kendo-file-manager-preview-border: null !default;
52589
53639
  $kendo-file-manager-preview-icon-bg: null !default;
52590
53640
  /// The text color of the FileManager preview icon.
52591
53641
  /// @group filemanager
52592
- $kendo-file-manager-preview-icon-text: k-try-tint( $kendo-file-manager-text, 4 ) !default;
53642
+ $kendo-file-manager-preview-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-file-manager-text, 4 )) !default;
52593
53643
  /// The border color of the FileManager preview icon.
52594
53644
  /// @group filemanager
52595
53645
  $kendo-file-manager-preview-icon-border: null !default;
@@ -52621,6 +53671,7 @@ $kendo-file-manager-preview-icon-border: null !default;
52621
53671
  border-bottom-width: $kendo-file-manager-toolbar-border-width;
52622
53672
  border-color: inherit;
52623
53673
  flex-shrink: 0;
53674
+ z-index: 1;
52624
53675
  }
52625
53676
 
52626
53677
 
@@ -52635,6 +53686,10 @@ $kendo-file-manager-preview-icon-border: null !default;
52635
53686
  overflow: hidden;
52636
53687
  }
52637
53688
 
53689
+ .k-filemanager-splitter {
53690
+ border-width: 0;
53691
+ }
53692
+
52638
53693
 
52639
53694
  // Navigation
52640
53695
  .k-filemanager-navigation {
@@ -53071,13 +54126,13 @@ $kendo-taskboard-columns-container-gap: $kendo-taskboard-spacer !default;
53071
54126
  $kendo-taskboard-column-width: 320px !default;
53072
54127
  $kendo-taskboard-column-border-width: 1px !default;
53073
54128
  $kendo-taskboard-column-border-radius: $kendo-border-radius-sm !default;
53074
- $kendo-taskboard-column-bg: if( $kendo-is-dark-theme, $gray-900, $gray-100 ) !default;
54129
+ $kendo-taskboard-column-bg: if($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $gray-900, $gray-100 )) !default;
53075
54130
  $kendo-taskboard-column-text: null !default;
53076
54131
  $kendo-taskboard-column-border: transparent !default;
53077
54132
 
53078
54133
  $kendo-taskboard-column-focus-bg: null !default;
53079
54134
  $kendo-taskboard-column-focus-text: null !default;
53080
- $kendo-taskboard-column-focus-border: k-try-shade( $kendo-base-border, 2.5 ) !default;
54135
+ $kendo-taskboard-column-focus-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 )) !default;
53081
54136
 
53082
54137
  $kendo-taskboard-column-header-padding-y: $kendo-taskboard-spacer * .75 !default;
53083
54138
  $kendo-taskboard-column-header-padding-x: $kendo-taskboard-column-header-padding-y !default;
@@ -53120,12 +54175,12 @@ $kendo-taskboard-card-shadow: $kendo-card-shadow !default;
53120
54175
 
53121
54176
  $kendo-taskboard-card-category-border-width: 4px !default;
53122
54177
 
53123
- $kendo-taskboard-card-focus-border: k-try-shade( $kendo-taskboard-card-border, 18% ) !default;
53124
- $kendo-taskboard-card-focus-shadow: $kendo-card-focus-shadow !default;
54178
+ $kendo-taskboard-card-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% )) !default;
53125
54179
 
53126
- $kendo-taskboard-card-hover-border: k-try-shade( $kendo-taskboard-card-border, 10% ) !default;
54180
+ $kendo-taskboard-card-focus-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% )) !default;
54181
+ $kendo-taskboard-card-focus-shadow: $kendo-card-focus-shadow !default;
53127
54182
 
53128
- $kendo-taskboard-card-selected-border: k-color-tint( $kendo-color-primary-lighter, 8 ) !default;
54183
+ $kendo-taskboard-card-selected-border: if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary-lighter, 8 )) !default;
53129
54184
  $kendo-taskboard-card-selected-shadow: none !default;
53130
54185
 
53131
54186
  $kendo-taskboard-card-header-text: $kendo-color-primary !default;
@@ -53134,9 +54189,8 @@ $kendo-taskboard-card-header-hover-text: $kendo-color-primary-darker !default;
53134
54189
 
53135
54190
  $kendo-taskboard-drag-placeholder-border-width: 1px !default;
53136
54191
  $kendo-taskboard-drag-placeholder-border-radius: $kendo-taskboard-card-border-radius !default;
53137
- $kendo-taskboard-drag-placeholder-bg: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .1 ) !default;
54192
+ $kendo-taskboard-drag-placeholder-bg: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .1 ) !default;
53138
54193
  $kendo-taskboard-drag-placeholder-border: $kendo-component-border !default;
53139
-
53140
54194
  // #endregion
53141
54195
  // #region @import "./_layout.scss"; -> scss/taskboard/_layout.scss
53142
54196
  // #region @import "@progress/kendo-theme-default/scss/taskboard/_layout.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-default/scss/taskboard/_layout.scss
@@ -53607,7 +54661,7 @@ $kendo-editor-selected-bg: $kendo-color-primary !default;
53607
54661
 
53608
54662
  /// The highlighted background color of the Editor.
53609
54663
  /// @group editor
53610
- $kendo-editor-highlighted-bg: k-color-mix( $kendo-color-primary, #ffffff, 20% ) !default;
54664
+ $kendo-editor-highlighted-bg: if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix( $kendo-color-primary, #ffffff, 20% )) !default;
53611
54665
 
53612
54666
  /// The horizontal margin of the Editor's export tool icon.
53613
54667
  /// @group editor
@@ -54847,12 +55901,12 @@ $kendo-gantt-treelist-bg: null !default;
54847
55901
  $kendo-gantt-treelist-text: null !default;
54848
55902
  $kendo-gantt-treelist-border: null !default;
54849
55903
 
54850
- $kendo-gantt-nonwork-bg: rgba( k-contrast-color( $kendo-gantt-bg ), .025 ) !default;
55904
+ $kendo-gantt-nonwork-bg: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .03 ), rgba( k-contrast-color( $kendo-gantt-bg ), .025 )) !default;
54851
55905
  $kendo-gantt-nonwork-text: null !default;
54852
55906
  $kendo-gantt-nonwork-border: null !default;
54853
55907
 
54854
55908
  $kendo-gantt-line-size: 2px !default;
54855
- $kendo-gantt-line-fill: k-color-mix( $kendo-gantt-text, $kendo-gantt-bg ) !default;
55909
+ $kendo-gantt-line-fill: if($kendo-enable-color-system, k-color( on-base ), k-color-mix( $kendo-gantt-text, $kendo-gantt-bg )) !default;
54856
55910
  $kendo-gantt-line-selected-fill: $kendo-selected-bg !default;
54857
55911
 
54858
55912
  $kendo-gantt-dot-size: 8px !default;
@@ -54862,24 +55916,24 @@ $kendo-gantt-dot-border: null !default;
54862
55916
  $kendo-gantt-dot-hover-bg: $kendo-gantt-bg !default;
54863
55917
  $kendo-gantt-dot-hover-border: $kendo-gantt-text !default;
54864
55918
 
54865
- $kendo-gantt-milestone-bg: if( k-is-light( $kendo-gantt-bg ), $gray-300, $gray-700 ) !default;
54866
- $kendo-gantt-milestone-border: k-try-shade( $kendo-gantt-milestone-bg, 2 ) !default;
55919
+ $kendo-gantt-milestone-bg: if($kendo-enable-color-system, k-color( base ), if( k-is-light( $kendo-gantt-bg ), $gray-300, $gray-700 )) !default;
55920
+ $kendo-gantt-milestone-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-gantt-milestone-bg, 2 )) !default;
54867
55921
  $kendo-gantt-milestone-selected-bg: $kendo-selected-bg !default;
54868
55922
  $kendo-gantt-milestone-selected-border: $kendo-selected-border !default;
54869
55923
 
54870
- $kendo-gantt-summary-bg: k-color-mix( $kendo-gantt-text, $kendo-gantt-bg ) !default;
55924
+ $kendo-gantt-summary-bg: if($kendo-enable-color-system, k-color( subtle ), k-color-mix( $kendo-gantt-text, $kendo-gantt-bg )) !default;
54871
55925
  $kendo-gantt-summary-progress-bg: $kendo-gantt-text !default;
54872
- $kendo-gantt-summary-selected-bg: k-color-mix( $kendo-selected-bg, $kendo-gantt-bg ) !default;
55926
+ $kendo-gantt-summary-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-color-mix( $kendo-selected-bg, $kendo-gantt-bg )) !default;
54873
55927
  $kendo-gantt-summary-progress-selected-bg: $kendo-selected-bg !default;
54874
55928
 
54875
55929
  $kendo-gantt-task-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
54876
55930
  $kendo-gantt-task-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
54877
55931
  $kendo-gantt-task-border-width: 1px !default;
54878
- $kendo-gantt-task-bg: if( k-is-light( $kendo-gantt-bg ), $gray-300, $gray-700 ) !default;
54879
- $kendo-gantt-task-text: k-contrast-color( $kendo-gantt-task-bg ) !default;
54880
- $kendo-gantt-task-border: if( k-is-light( $kendo-gantt-bg ), $gray-400, $gray-600 ) !default;
54881
- $kendo-gantt-task-progress-bg: if( k-is-light( $kendo-gantt-bg ), $gray-400, $gray-600 ) !default;
54882
- $kendo-gantt-task-selected-bg: k-color-mix( $kendo-selected-bg, $kendo-gantt-bg ) !default;
55932
+ $kendo-gantt-task-bg: if($kendo-enable-color-system, k-color( base ), if( k-is-light( $kendo-gantt-bg ), $gray-300, $gray-700 )) !default;
55933
+ $kendo-gantt-task-text: if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-gantt-task-bg )) !default;
55934
+ $kendo-gantt-task-border: if($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-gantt-bg ), $gray-400, $gray-600 )) !default;
55935
+ $kendo-gantt-task-progress-bg: if($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-gantt-bg ), $gray-400, $gray-600 )) !default;
55936
+ $kendo-gantt-task-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-color-mix( $kendo-selected-bg, $kendo-gantt-bg )) !default;
54883
55937
  $kendo-gantt-task-selected-text: $kendo-selected-text !default;
54884
55938
  $kendo-gantt-task-selected-border: $kendo-selected-bg !default;
54885
55939
  $kendo-gantt-task-progress-selected-bg: $kendo-selected-bg !default;
@@ -54913,10 +55967,10 @@ $kendo-gantt-planned-bg: $kendo-color-primary !default;
54913
55967
  $kendo-gantt-planned-border: $kendo-gantt-planned-bg !default;
54914
55968
 
54915
55969
  $kendo-gantt-delayed-bg: $kendo-color-error !default;
54916
- $kendo-gantt-delayed-bg-lighter: k-color-tint( $kendo-gantt-delayed-bg, 5 ) !default;
55970
+ $kendo-gantt-delayed-bg-lighter: if($kendo-enable-color-system, k-color( error-emphasis ), k-color-tint( $kendo-gantt-delayed-bg, 5 )) !default;
54917
55971
 
54918
55972
  $kendo-gantt-advanced-bg: $kendo-color-success !default;
54919
- $kendo-gantt-advanced-bg-lighter: k-color-tint( $kendo-gantt-advanced-bg, 5 ) !default;
55973
+ $kendo-gantt-advanced-bg-lighter: if($kendo-enable-color-system, k-color( success-emphasis ), k-color-tint( $kendo-gantt-advanced-bg, 5 )) !default;
54920
55974
 
54921
55975
  $kendo-gantt-action-on-offset-text: #000000 !default;
54922
55976
  $kendo-gantt-offset-resize-handler-top: 45% !default;
@@ -55223,12 +56277,20 @@ $kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
55223
56277
 
55224
56278
 
55225
56279
  // Timeline
55226
- .k-gantt-timeline {
56280
+ .k-gantt-timeline-pane {
55227
56281
 
55228
- .k-timeline {
56282
+ .k-gantt-timeline {
55229
56283
  height: 100%;
55230
56284
  border-width: 0;
55231
56285
  display: flex;
56286
+
56287
+ *,
56288
+ *::before,
56289
+ *::after,
56290
+ &::before,
56291
+ &::after {
56292
+ box-sizing: border-box;
56293
+ }
55232
56294
  }
55233
56295
  .k-grid-header {}
55234
56296
  .k-grid-content {
@@ -55704,7 +56766,7 @@ $kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
55704
56766
  }
55705
56767
 
55706
56768
  .k-gantt,
55707
- .k-gantt-timeline,
56769
+ .k-gantt-timeline-pane,
55708
56770
  .k-gantt-dependencies {
55709
56771
  width: auto !important; // stylelint-disable-line declaration-no-important
55710
56772
  height: auto !important; // stylelint-disable-line declaration-no-important
@@ -55749,7 +56811,7 @@ $kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
55749
56811
  margin-inline: -26px;
55750
56812
  }
55751
56813
 
55752
- .k-gantt-timeline {
56814
+ .k-gantt-timeline-pane {
55753
56815
  .k-header {
55754
56816
  border-width: 0 $kendo-grid-cell-vertical-border-width 1px 0;
55755
56817
  }
@@ -55809,7 +56871,7 @@ $kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
55809
56871
  margin-right: $kendo-gantt-rtl-milestone-planned-moment-margin-x;
55810
56872
  }
55811
56873
 
55812
- .k-gantt-timeline .k-milestone-wrap .k-task-start {
56874
+ .k-gantt-timeline-pane .k-milestone-wrap .k-task-start {
55813
56875
  right: $kendo-gantt-rtl-milestone-dot-start-margin-x;
55814
56876
  }
55815
56877
 
@@ -56225,7 +57287,7 @@ $kendo-scheduler-event-min-height: 25px !default;
56225
57287
  $kendo-scheduler-event-border-radius: $kendo-border-radius-md !default;
56226
57288
  $kendo-scheduler-event-line-height: calc( #{$kendo-scheduler-event-min-height} - (2 * #{$kendo-padding-sm-y}) ) !default;
56227
57289
 
56228
- $kendo-scheduler-event-bg: k-color-tint( $kendo-selected-bg, 2 ) !default;
57290
+ $kendo-scheduler-event-bg: if($kendo-enable-color-system, k-color( primary ), k-color-tint( $kendo-selected-bg, 2 )) !default;
56229
57291
  $kendo-scheduler-event-text: $kendo-selected-text !default;
56230
57292
  $kendo-scheduler-event-border: null !default;
56231
57293
  $kendo-scheduler-event-gradient: null !default;
@@ -56251,13 +57313,13 @@ $kendo-scheduler-cell-height: $kendo-line-height-em !default;
56251
57313
  $kendo-scheduler-datecolumn-width: 12em !default;
56252
57314
  $kendo-scheduler-timecolumn-width: 11em !default;
56253
57315
 
56254
- $kendo-scheduler-nonwork-bg: k-try-shade( $kendo-scheduler-bg, .5 ) !default;
57316
+ $kendo-scheduler-nonwork-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-scheduler-bg, .5 )) !default;
56255
57317
  $kendo-scheduler-nonwork-text: null !default;
56256
57318
 
56257
57319
  $kendo-scheduler-weekend-bg: null !default;
56258
57320
  $kendo-scheduler-weekend-text: null !default;
56259
57321
 
56260
- $kendo-scheduler-othermonth-bg: k-try-shade( $kendo-scheduler-bg, .5 ) !default;
57322
+ $kendo-scheduler-othermonth-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-scheduler-bg, .5 )) !default;
56261
57323
  $kendo-scheduler-othermonth-text: null !default;
56262
57324
 
56263
57325
  $kendo-scheduler-yearview-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
@@ -57448,7 +58510,7 @@ $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
57448
58510
 
57449
58511
  .k-scheduler-layout td.k-selected,
57450
58512
  .k-scheduler-layout .k-scheduler-cell.k-selected {
57451
- background-color: rgba($kendo-selected-bg, .25);
58513
+ background-color: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25));
57452
58514
  }
57453
58515
 
57454
58516
  .k-scheduler-layout-flex {
@@ -57491,7 +58553,7 @@ $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
57491
58553
  }
57492
58554
 
57493
58555
  &.k-event-inverse {
57494
- color: k-contrast-legacy( $kendo-scheduler-event-text );
58556
+ color: if($kendo-enable-color-system, k-color( on-app-surface ), k-contrast-legacy( $kendo-scheduler-event-text ));
57495
58557
  }
57496
58558
 
57497
58559
  &.k-event-ongoing {
@@ -57565,7 +58627,7 @@ $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
57565
58627
 
57566
58628
  // Selected
57567
58629
  .k-scheduler-content tr.k-selected {
57568
- background-color: rgba($kendo-selected-bg, .25);
58630
+ background-color: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25));
57569
58631
  }
57570
58632
  .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
57571
58633
  .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {
@@ -57754,7 +58816,7 @@ $kendo-chat-bubble-hover-shadow: none !default;
57754
58816
  $kendo-chat-bubble-selected-shadow: none !default;
57755
58817
 
57756
58818
  $kendo-chat-alt-bubble-bg: $kendo-color-primary !default;
57757
- $kendo-chat-alt-bubble-text: k-contrast-color( $kendo-chat-alt-bubble-bg ) !default;
58819
+ $kendo-chat-alt-bubble-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-chat-alt-bubble-bg )) !default;
57758
58820
  $kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default;
57759
58821
  $kendo-chat-alt-bubble-shadow: none !default;
57760
58822
  $kendo-chat-alt-bubble-hover-shadow: none !default;
@@ -58429,7 +59491,7 @@ $kendo-media-player-titlebar-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
58429
59491
  $kendo-media-player-titlebar-bg: null !default;
58430
59492
  $kendo-media-player-titlebar-text: $kendo-media-player-bg !default;
58431
59493
  $kendo-media-player-titlebar-border: null !default;
58432
- $kendo-media-player-titlebar-gradient: rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) !default;
59494
+ $kendo-media-player-titlebar-gradient: if($kendo-enable-color-system, ( rgba( k-color( on-app-surface, true ), .7 ), rgba( k-color( on-app-surface, true ), 0 ) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) )) !default;
58433
59495
 
58434
59496
  // #endregion
58435
59497
  // #region @import "./_layout.scss"; -> scss/mediaplayer/_layout.scss
@@ -58567,7 +59629,7 @@ $kendo-media-player-titlebar-gradient: rgba( $kendo-media-player-text, .7 ), rgb
58567
59629
  .k-mediaplayer-titlebar {
58568
59630
  color: $kendo-media-player-titlebar-text;
58569
59631
  background-image: linear-gradient( $kendo-media-player-titlebar-gradient );
58570
- text-shadow: 0 0 2px rgba( $kendo-media-player-text, .5 );
59632
+ text-shadow: 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-media-player-text, .5 ));
58571
59633
  }
58572
59634
 
58573
59635
  }
@@ -58659,9 +59721,9 @@ $kendo-timeline-mobile-spacing-y: $kendo-padding-md-x !default;
58659
59721
  $kendo-timeline-track-arrow-width: 38px !default;
58660
59722
  $kendo-timeline-track-arrow-height: 38px !default;
58661
59723
 
58662
- $kendo-timeline-track-arrow-disabled-text: k-true-mix( $kendo-button-text, $kendo-body-bg, 65% ) !default;
58663
- $kendo-timeline-track-arrow-disabled-bg: k-true-mix( $kendo-button-bg, $kendo-body-bg, 65% ) !default;
58664
- $kendo-timeline-track-arrow-disabled-border: k-true-mix( $kendo-button-border, $kendo-body-bg, 65% ) !default;
59724
+ $kendo-timeline-track-arrow-disabled-bg: if($kendo-enable-color-system, rgba( k-color( base-subtle, true ), .65 ), k-true-mix( $kendo-button-bg, $kendo-body-bg, 65% )) !default;
59725
+ $kendo-timeline-track-arrow-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .65 ), k-true-mix( $kendo-button-text, $kendo-body-bg, 65% )) !default;
59726
+ $kendo-timeline-track-arrow-disabled-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .15 ), k-true-mix( $kendo-button-border, $kendo-body-bg, 65% )) !default;
58665
59727
 
58666
59728
  $kendo-timeline-track-size: 6px !default;
58667
59729
  $kendo-timeline-track-wrap-padding-bottom: k-math-div( $kendo-timeline-track-size, 2 ) !default;
@@ -58685,7 +59747,7 @@ $kendo-timeline-flag-max-width: calc(#{$kendo-timeline-flag-min-width} + 2 * #{$
58685
59747
  $kendo-timeline-mobile-flag-max-width: calc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-mobile-spacing-x}) !default;
58686
59748
  $kendo-timeline-horizontal-flag-min-width: 80px !default;
58687
59749
  $kendo-timeline-flag-bg: $kendo-color-primary !default;
58688
- $kendo-timeline-flag-text: k-contrast-color( $kendo-timeline-flag-bg ) !default;
59750
+ $kendo-timeline-flag-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-timeline-flag-bg )) !default;
58689
59751
 
58690
59752
  $kendo-timeline-flag-callout-width: 10px !default;
58691
59753
  $kendo-timeline-flag-callout-height: 10px !default;
@@ -60407,6 +61469,253 @@ $kendo-scrollview-transition-timing-function: ease-in-out !default;
60407
61469
  @include kendo-scrollview--styles();
60408
61470
  }
60409
61471
 
61472
+ // #endregion
61473
+ // #region @import "./prompt/_index.scss"; -> scss/prompt/_index.scss
61474
+ // #region @import "../core/_index.scss"; -> scss/core/_index.scss
61475
+ // File already imported_once. Skipping output.
61476
+ // #endregion
61477
+ // #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
61478
+ // File already imported_once. Skipping output.
61479
+ // #endregion
61480
+
61481
+
61482
+ // Module meta
61483
+ $_kendo-module-meta: (
61484
+ name: "prompt",
61485
+ dependencies: ()
61486
+ );
61487
+
61488
+
61489
+ // Dependencies
61490
+ // #region @import "../common/_index.scss"; -> scss/common/_index.scss
61491
+ // File already imported_once. Skipping output.
61492
+ // #endregion
61493
+
61494
+
61495
+ // Component
61496
+ // #region @import "./_variables.scss"; -> scss/prompt/_variables.scss
61497
+ // Prompt
61498
+
61499
+ /// The text color of the Prompt.
61500
+ /// @group prompt
61501
+ $kendo-prompt-text: $kendo-component-text !default;
61502
+ /// The background color of the Prompt.
61503
+ /// @group prompt
61504
+ $kendo-prompt-bg: $kendo-component-bg !default;
61505
+ /// The border color of the Prompt.
61506
+ /// @group prompt
61507
+ $kendo-prompt-border: $kendo-component-border !default;
61508
+
61509
+ /// The text color of the Prompt header.
61510
+ /// @group prompt
61511
+ $kendo-prompt-header-text: $kendo-component-header-text !default;
61512
+ /// The background color of the Prompt header.
61513
+ /// @group prompt
61514
+ $kendo-prompt-header-bg: $kendo-component-bg !default;
61515
+ /// The border color of the Prompt header.
61516
+ /// @group prompt
61517
+ $kendo-prompt-header-border: $kendo-component-header-border !default;
61518
+
61519
+ /// The vertical padding of the Prompt content.
61520
+ /// @group prompt
61521
+ $kendo-prompt-content-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
61522
+ /// The horizontal padding of the Prompt content.
61523
+ /// @group prompt
61524
+ $kendo-prompt-content-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
61525
+ /// The spacing between the items of the Prompt content.
61526
+ /// @group prompt
61527
+ $kendo-prompt-content-spacing: k-map-get( $kendo-spacing, 4 ) !default;
61528
+ /// The text color of the Prompt content.
61529
+ /// @group prompt
61530
+ $kendo-prompt-content-text: $kendo-component-header-text !default;
61531
+ /// The background color of the Prompt content.
61532
+ /// @group prompt
61533
+ $kendo-prompt-content-bg: $kendo-component-header-bg !default;
61534
+ /// The text border of the Prompt content.
61535
+ /// @group prompt
61536
+ $kendo-prompt-content-border: $kendo-component-header-border !default;
61537
+
61538
+ /// The spacing between the items of the Prompt content expander.
61539
+ /// @group prompt
61540
+ $kendo-prompt-expander-spacing: k-map-get( $kendo-spacing, 2 ) !default;
61541
+
61542
+ /// The vertical padding of the Prompt suggestion container.
61543
+ /// @group prompt
61544
+ $kendo-prompt-suggestion-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
61545
+ /// The horizontal padding of the Prompt suggestion container.
61546
+ /// @group prompt
61547
+ $kendo-prompt-suggestion-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
61548
+ /// The border radius of the Prompt suggestion container.
61549
+ /// @group prompt
61550
+ $kendo-prompt-suggestion-border-radius: $kendo-border-radius-md !default;
61551
+ /// The text color of the Prompt suggestion container.
61552
+ /// @group prompt
61553
+ $kendo-prompt-suggestion-text: $kendo-component-text !default;
61554
+ /// The background color of the Prompt suggestion container.
61555
+ /// @group prompt
61556
+ $kendo-prompt-suggestion-bg: $kendo-body-bg !default;
61557
+ /// The border color of the Prompt suggestion container.
61558
+ /// @group prompt
61559
+ $kendo-prompt-suggestion-border: $kendo-component-border !default;
61560
+ /// The elevation of the Prompt suggestion container.
61561
+ /// @group prompt
61562
+ $kendo-prompt-suggestion-shadow: k-elevation(1) !default;
61563
+
61564
+ // #endregion
61565
+ // #region @import "./_layout.scss"; -> scss/prompt/_layout.scss
61566
+ // #region @import "@progress/kendo-theme-default/scss/prompt/_layout.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-default/scss/prompt/_layout.scss
61567
+ @mixin kendo-prompt--layout-base() {
61568
+
61569
+ // Prompt
61570
+ .k-prompt {
61571
+ display: flex;
61572
+ flex-direction: column;
61573
+ position: relative;
61574
+ overflow: hidden;
61575
+ }
61576
+
61577
+ // Content
61578
+ .k-prompt-content {
61579
+ padding-block: $kendo-prompt-content-padding-y;
61580
+ padding-inline: $kendo-prompt-content-padding-x;
61581
+ display: flex;
61582
+ flex-flow: column nowrap;
61583
+ flex: 1 1 auto;
61584
+ gap: $kendo-prompt-content-spacing;
61585
+ overflow: auto;
61586
+ }
61587
+
61588
+ .k-prompt-view {
61589
+ display: flex;
61590
+ flex-direction: column;
61591
+ flex: 1 1 auto;
61592
+ gap: $kendo-prompt-content-spacing;
61593
+ }
61594
+
61595
+ // Prompt Expander
61596
+ .k-prompt-expander {
61597
+ display: flex;
61598
+ flex-direction: column;
61599
+ flex: 1;
61600
+ align-items: start;
61601
+ gap: $kendo-prompt-expander-spacing;
61602
+ }
61603
+
61604
+ .k-prompt-expander-content {
61605
+ display: flex;
61606
+ flex-flow: column;
61607
+ flex: 0 0 auto;
61608
+ gap: $kendo-prompt-expander-spacing;
61609
+ align-self: stretch;
61610
+ }
61611
+
61612
+ .k-prompt-suggestion {
61613
+ border-width: 1px;
61614
+ border-style: solid;
61615
+ border-radius: $kendo-prompt-suggestion-border-radius;
61616
+ padding-block: $kendo-prompt-suggestion-padding-y;
61617
+ padding-inline: $kendo-prompt-suggestion-padding-x;
61618
+ cursor: pointer;
61619
+ }
61620
+
61621
+ .k-prompt-setting {
61622
+ display: flex;
61623
+ flex-direction: column;
61624
+ }
61625
+
61626
+ // Actions
61627
+ .k-prompt-actions.k-actions {
61628
+ margin: 0;
61629
+ }
61630
+
61631
+ }
61632
+
61633
+
61634
+ @mixin kendo-prompt--layout() {
61635
+ @include kendo-prompt--layout-base();
61636
+ }
61637
+
61638
+ // #endregion
61639
+
61640
+
61641
+ @mixin kendo-prompt--layout() {
61642
+ @include kendo-prompt--layout-base();
61643
+ }
61644
+
61645
+ // #endregion
61646
+ // #region @import "./_theme.scss"; -> scss/prompt/_theme.scss
61647
+ // #region @import "@progress/kendo-theme-default/scss/prompt/_theme.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-default/scss/prompt/_theme.scss
61648
+ @mixin kendo-prompt--theme-base() {
61649
+
61650
+ .k-prompt {
61651
+ @include fill(
61652
+ $kendo-prompt-text,
61653
+ $kendo-prompt-bg,
61654
+ $kendo-prompt-border
61655
+ );
61656
+ }
61657
+
61658
+ .k-prompt-header {
61659
+ @include fill(
61660
+ $kendo-prompt-header-text,
61661
+ $kendo-prompt-header-bg,
61662
+ $kendo-prompt-header-border
61663
+ );
61664
+ }
61665
+
61666
+ .k-prompt-content {
61667
+ @include fill(
61668
+ $kendo-prompt-content-text,
61669
+ $kendo-prompt-content-bg,
61670
+ $kendo-prompt-content-border
61671
+ );
61672
+ }
61673
+
61674
+ .k-prompt-suggestion {
61675
+ @include fill(
61676
+ $kendo-prompt-suggestion-text,
61677
+ $kendo-prompt-suggestion-bg,
61678
+ $kendo-prompt-suggestion-border
61679
+ );
61680
+ @include box-shadow( $kendo-prompt-suggestion-shadow );
61681
+ }
61682
+
61683
+ }
61684
+
61685
+
61686
+ @mixin kendo-prompt--theme() {
61687
+ @include kendo-prompt--theme-base();
61688
+ }
61689
+
61690
+ // #endregion
61691
+
61692
+
61693
+ @mixin kendo-prompt--theme() {
61694
+ @include kendo-prompt--theme-base();
61695
+ }
61696
+
61697
+ // #endregion
61698
+
61699
+
61700
+ // Register
61701
+ // #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
61702
+ // File already imported_once. Skipping output.
61703
+ // #endregion
61704
+ @include module-register( $_kendo-module-meta... );
61705
+
61706
+
61707
+ // Expose
61708
+ @mixin kendo-prompt--styles() {
61709
+ @include module-render( "prompt" ) {
61710
+ @include kendo-prompt--layout();
61711
+ @include kendo-prompt--theme();
61712
+ }
61713
+ }
61714
+
61715
+ @if $kendo-auto-bootstrap {
61716
+ @include kendo-prompt--styles();
61717
+ }
61718
+
60410
61719
  // #endregion
60411
61720
 
60412
61721
 
@@ -60454,51 +61763,51 @@ $_kendo-module-meta: (
60454
61763
 
60455
61764
  /// The first base series color and its light and dark shades.
60456
61765
  /// @group charts
60457
- $kendo-series-a: $blue !default;
60458
- $kendo-series-a-dark: k-color-mix( black, $kendo-series-a, 25% ) !default;
60459
- $kendo-series-a-darker: k-color-mix( black, $kendo-series-a, 50% ) !default;
60460
- $kendo-series-a-light: k-color-mix( white, $kendo-series-a, 25% ) !default;
60461
- $kendo-series-a-lighter: k-color-mix( white, $kendo-series-a, 50% ) !default;
61766
+ $kendo-series-a: if($kendo-enable-color-system, k-color( series-a ), $blue) !default;
61767
+ $kendo-series-a-dark: if($kendo-enable-color-system, k-color( series-a-bold ), k-color-mix( black, $kendo-series-a, 25% )) !default;
61768
+ $kendo-series-a-darker: if($kendo-enable-color-system, k-color( series-a-bolder ), k-color-mix( black, $kendo-series-a, 50% )) !default;
61769
+ $kendo-series-a-light: if($kendo-enable-color-system, k-color( series-a-subtle ), k-color-mix( white, $kendo-series-a, 25% )) !default;
61770
+ $kendo-series-a-lighter: if($kendo-enable-color-system, k-color( series-a-subtler ), k-color-mix( white, $kendo-series-a, 50% )) !default;
60462
61771
 
60463
61772
  /// The second base series color and its light and dark shades.
60464
61773
  /// @group charts
60465
- $kendo-series-b: $purple !default;
60466
- $kendo-series-b-dark: k-color-mix( black, $kendo-series-b, 25% ) !default;
60467
- $kendo-series-b-darker: k-color-mix( black, $kendo-series-b, 50% ) !default;
60468
- $kendo-series-b-light: k-color-mix( white, $kendo-series-b, 25% ) !default;
60469
- $kendo-series-b-lighter: k-color-mix( white, $kendo-series-b, 50% ) !default;
61774
+ $kendo-series-b: if($kendo-enable-color-system, k-color( series-b ), $purple) !default;
61775
+ $kendo-series-b-dark: if($kendo-enable-color-system, k-color( series-b-bold ), k-color-mix( black, $kendo-series-b, 25% )) !default;
61776
+ $kendo-series-b-darker: if($kendo-enable-color-system, k-color( series-b-bolder ), k-color-mix( black, $kendo-series-b, 50% )) !default;
61777
+ $kendo-series-b-light: if($kendo-enable-color-system, k-color( series-b-subtle ), k-color-mix( white, $kendo-series-b, 25% )) !default;
61778
+ $kendo-series-b-lighter: if($kendo-enable-color-system, k-color( series-b-subtler ), k-color-mix( white, $kendo-series-b, 50% )) !default;
60470
61779
 
60471
61780
  /// The third base series color and its light and dark shades.
60472
61781
  /// @group charts
60473
- $kendo-series-c: $teal !default;
60474
- $kendo-series-c-dark: k-color-mix( black, $kendo-series-c, 25% ) !default;
60475
- $kendo-series-c-darker: k-color-mix( black, $kendo-series-c, 50% ) !default;
60476
- $kendo-series-c-light: k-color-mix( white, $kendo-series-c, 25% ) !default;
60477
- $kendo-series-c-lighter: k-color-mix( white, $kendo-series-c, 50% ) !default;
61782
+ $kendo-series-c: if($kendo-enable-color-system, k-color( series-c ), $teal) !default;
61783
+ $kendo-series-c-dark: if($kendo-enable-color-system, k-color( series-c-bold ), k-color-mix( black, $kendo-series-c, 25% )) !default;
61784
+ $kendo-series-c-darker: if($kendo-enable-color-system, k-color( series-c-bolder ), k-color-mix( black, $kendo-series-c, 50% )) !default;
61785
+ $kendo-series-c-light: if($kendo-enable-color-system, k-color( series-c-subtle ), k-color-mix( white, $kendo-series-c, 25% )) !default;
61786
+ $kendo-series-c-lighter: if($kendo-enable-color-system, k-color( series-c-subtler ), k-color-mix( white, $kendo-series-c, 50% )) !default;
60478
61787
 
60479
61788
  /// The fourth base series color and its light and dark shades.
60480
61789
  /// @group charts
60481
- $kendo-series-d: $green !default;
60482
- $kendo-series-d-dark: k-color-mix( black, $kendo-series-d, 25% ) !default;
60483
- $kendo-series-d-darker: k-color-mix( black, $kendo-series-d, 50% ) !default;
60484
- $kendo-series-d-light: k-color-mix( white, $kendo-series-d, 25% ) !default;
60485
- $kendo-series-d-lighter: k-color-mix( white, $kendo-series-d, 50% ) !default;
61790
+ $kendo-series-d: if($kendo-enable-color-system, k-color( series-d ), $green) !default;
61791
+ $kendo-series-d-dark: if($kendo-enable-color-system, k-color( series-d-bold ), k-color-mix( black, $kendo-series-d, 25% )) !default;
61792
+ $kendo-series-d-darker: if($kendo-enable-color-system, k-color( series-d-bolder ), k-color-mix( black, $kendo-series-d, 50% )) !default;
61793
+ $kendo-series-d-light: if($kendo-enable-color-system, k-color( series-d-subtle ), k-color-mix( white, $kendo-series-d, 25% )) !default;
61794
+ $kendo-series-d-lighter: if($kendo-enable-color-system, k-color( series-d-subtler ), k-color-mix( white, $kendo-series-d, 50% )) !default;
60486
61795
 
60487
61796
  /// The fifth base series color and its light and dark shades.
60488
61797
  /// @group charts
60489
- $kendo-series-e: $yellow !default;
60490
- $kendo-series-e-dark: k-color-mix( black, $kendo-series-e, 25% ) !default;
60491
- $kendo-series-e-darker: k-color-mix( black, $kendo-series-e, 50% ) !default;
60492
- $kendo-series-e-light: k-color-mix( white, $kendo-series-e, 25% ) !default;
60493
- $kendo-series-e-lighter: k-color-mix( white, $kendo-series-e, 50% ) !default;
61798
+ $kendo-series-e: if($kendo-enable-color-system, k-color( series-e ), $yellow) !default;
61799
+ $kendo-series-e-dark: if($kendo-enable-color-system, k-color( series-e-bold ), k-color-mix( black, $kendo-series-e, 25% )) !default;
61800
+ $kendo-series-e-darker: if($kendo-enable-color-system, k-color( series-e-bolder ), k-color-mix( black, $kendo-series-e, 50% )) !default;
61801
+ $kendo-series-e-light: if($kendo-enable-color-system, k-color( series-e-subtle ), k-color-mix( white, $kendo-series-e, 25% )) !default;
61802
+ $kendo-series-e-lighter: if($kendo-enable-color-system, k-color( series-e-subtler ), k-color-mix( white, $kendo-series-e, 50% )) !default;
60494
61803
 
60495
61804
  /// The sixth base series color and its light and dark shades.
60496
61805
  /// @group charts
60497
- $kendo-series-f: $red !default;
60498
- $kendo-series-f-dark: k-color-mix( black, $kendo-series-f, 25% ) !default;
60499
- $kendo-series-f-darker: k-color-mix( black, $kendo-series-f, 50% ) !default;
60500
- $kendo-series-f-light: k-color-mix( white, $kendo-series-f, 25% ) !default;
60501
- $kendo-series-f-lighter: k-color-mix( white, $kendo-series-f, 50% ) !default;
61806
+ $kendo-series-f: if($kendo-enable-color-system, k-color( series-f ), $red) !default;
61807
+ $kendo-series-f-dark: if($kendo-enable-color-system, k-color( series-f-bold ), k-color-mix( black, $kendo-series-f, 25% )) !default;
61808
+ $kendo-series-f-darker: if($kendo-enable-color-system, k-color( series-f-bolder ), k-color-mix( black, $kendo-series-f, 50% )) !default;
61809
+ $kendo-series-f-light: if($kendo-enable-color-system, k-color( series-f-subtle ), k-color-mix( white, $kendo-series-f, 25% )) !default;
61810
+ $kendo-series-f-lighter: if($kendo-enable-color-system, k-color( series-f-subtler ), k-color-mix( white, $kendo-series-f, 50% )) !default;
60502
61811
 
60503
61812
  /// The series colors in order:
60504
61813
  /// base, light, dark, lighter, darker
@@ -60549,13 +61858,13 @@ $kendo-chart-pane-title-font-weight: $kendo-font-weight-normal !default;
60549
61858
 
60550
61859
  /// The color of the Chart grid lines (major).
60551
61860
  /// @group charts
60552
- $kendo-chart-major-lines: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) !default;
61861
+ $kendo-chart-major-lines: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 ) !default;
60553
61862
 
60554
61863
  /// The color of the Chart grid lines (minor).
60555
61864
  /// @group charts
60556
- $kendo-chart-minor-lines: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 ) !default;
61865
+ $kendo-chart-minor-lines: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .04 ) !default;
60557
61866
 
60558
- $kendo-chart-inactive: rgba( $kendo-body-text, .5 ) !default;
61867
+ $kendo-chart-inactive: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), $kendo-body-text), .5 ) !default;
60559
61868
  $kendo-chart-area-opacity: .6 !default;
60560
61869
  $kendo-chart-area-inactive-opacity: .1 !default;
60561
61870
  $kendo-chart-line-inactive-opacity: .3 !default;
@@ -60566,20 +61875,20 @@ $kendo-chart-bg: $kendo-component-bg !default;
60566
61875
  $kendo-chart-text: $kendo-component-text !default;
60567
61876
  $kendo-chart-border: $kendo-component-border !default;
60568
61877
 
60569
- $kendo-chart-crosshair-background: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
61878
+ $kendo-chart-crosshair-background: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
60570
61879
  $kendo-chart-crosshair-shared-tooltip-color: $kendo-chart-text !default;
60571
- $kendo-chart-crosshair-shared-tooltip-background: k-try-shade( $kendo-chart-bg, 1 ) !default;
60572
- $kendo-chart-crosshair-shared-tooltip-border: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08) !default;
61880
+ $kendo-chart-crosshair-shared-tooltip-background: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-chart-bg, 1 )) !default;
61881
+ $kendo-chart-crosshair-shared-tooltip-border: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ))), .08) !default;
60573
61882
 
60574
- $kendo-chart-notes-background: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
60575
- $kendo-chart-notes-border: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
60576
- $kendo-chart-notes-lines: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
61883
+ $kendo-chart-notes-background: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
61884
+ $kendo-chart-notes-border: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
61885
+ $kendo-chart-notes-lines: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
60577
61886
 
60578
- $kendo-chart-error-bars-background: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
61887
+ $kendo-chart-error-bars-background: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
60579
61888
 
60580
61889
  $kendo-chart-selection-handle-size: 22px !default;
60581
- $kendo-chart-selection-border-color: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) !default;
60582
- $kendo-chart-selection-shadow: inset 0 1px 7px rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .15) !default;
61890
+ $kendo-chart-selection-border-color: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 ) !default;
61891
+ $kendo-chart-selection-shadow: inset 0 1px 7px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .15) !default;
60583
61892
 
60584
61893
 
60585
61894
  // TreeMap
@@ -61045,14 +62354,14 @@ $kendo-treemap-line-height: $kendo-line-height-md !default;
61045
62354
  series-30: $kendo-series-30,
61046
62355
 
61047
62356
  gauge-pointer: $kendo-color-primary,
61048
- gauge-track: k-try-shade( $kendo-chart-bg )
62357
+ gauge-track: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-chart-bg ))
61049
62358
  );
61050
62359
 
61051
62360
  @each $name, $value in $exported {
61052
62361
  $type: k-meta-type-of($value);
61053
62362
 
61054
62363
  .k-var--#{$name} {
61055
- @if $type == "color" {
62364
+ @if $type == "color" or $type == "string" {
61056
62365
  // background-color can store any color
61057
62366
  background-color: $value;
61058
62367
  } @else if $type == "number" {
@@ -61341,7 +62650,7 @@ $kendo-map-zoom-control-button-padding-y: $kendo-map-zoom-control-button-padding
61341
62650
  $kendo-map-attribution-padding-x: $kendo-padding-sm-x !default;
61342
62651
  $kendo-map-attribution-padding-y: $kendo-padding-sm-y !default;
61343
62652
  $kendo-map-attribution-font-size: ($kendo-map-font-size * .75) !default;
61344
- $kendo-map-attribution-bg: rgba( $kendo-map-bg, .8 ) !default;
62653
+ $kendo-map-attribution-bg: if($kendo-enable-color-system, rgba( k-color( app-surface, true ), .8 ), rgba( $kendo-map-bg, .8 )) !default;
61345
62654
 
61346
62655
  $kendo-map-marker-fill: $kendo-color-primary !default;
61347
62656
 
@@ -61942,7 +63251,7 @@ $kendo-signature-lg-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
61942
63251
 
61943
63252
  $kendo-signature-line-width: 1px !default;
61944
63253
  $kendo-signature-line-style: dashed !default;
61945
- $kendo-signature-line-color: rgba( $kendo-color-info, .24 ) !default;
63254
+ $kendo-signature-line-color: if($kendo-enable-color-system, rgba( k-color( info, true ), .24 ), rgba( $kendo-color-info, .24 )) !default;
61946
63255
 
61947
63256
  $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding-x} ) !default;
61948
63257
  $kendo-signature-sm-line-size: calc( 100% - 2 * #{$kendo-signature-sm-padding-x} ) !default;
@@ -62271,6 +63580,7 @@ $kendo-signature-maximized-line-width: 3px !default;
62271
63580
  @include kendo-pdf-viewer--styles();
62272
63581
  @include kendo-scroller--styles();
62273
63582
  @include kendo-scrollview--styles();
63583
+ @include kendo-prompt--styles();
62274
63584
 
62275
63585
 
62276
63586
  // Dataviz
@@ -62282,7 +63592,6 @@ $kendo-signature-maximized-line-width: 3px !default;
62282
63592
 
62283
63593
  // #endregion
62284
63594
 
62285
-
62286
63595
  @if not $kendo-auto-bootstrap {
62287
63596
  @include kendo-theme--config();
62288
63597
  @include kendo-theme--styles();