@progress/kendo-theme-core 14.7.0-dev.1 → 14.7.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 (18) hide show
  1. package/dist/meta/sassdoc-data.json +36 -36
  2. package/dist/meta/sassdoc-raw-data.json +18 -18
  3. package/package.json +1 -1
  4. package/scss/components/badge/_layout.scss +10 -0
  5. package/scss/components/badge/_theme.scss +13 -0
  6. package/scss/components/badge/_variables.scss +8 -0
  7. package/scss/components/button/_layout.scss +2 -0
  8. package/scss/components/button/_variables.scss +9 -0
  9. package/scss/components/imageeditor/_layout.scss +75 -29
  10. package/scss/components/imageeditor/_theme.scss +9 -3
  11. package/scss/components/imageeditor/_variables.scss +3 -0
  12. package/scss/components/listbox/_layout.scss +84 -0
  13. package/scss/components/listbox/_theme.scss +38 -0
  14. package/scss/components/listbox/_variables.scss +3 -0
  15. package/scss/components/marquee/_theme.scss +14 -5
  16. package/scss/components/scheduler/_layout.scss +0 -8
  17. package/scss/components/scheduler/_theme.scss +10 -10
  18. package/scss/components/scheduler/_variables.scss +2 -2
package/dist/meta/sassdoc-data.json CHANGED
@@ -615,17 +615,17 @@
615
615
  {
616
616
  "description": "The sizes map of the Badge.\n",
617
617
  "commentRange": {
618
- "start": 33,
619
- "end": 34
618
+ "start": 38,
619
+ "end": 39
620
620
  },
621
621
  "context": {
622
622
  "type": "variable",
623
623
  "name": "kendo-badge-sizes",
624
- "value": "(\n sm: (\n padding-x: $kendo-badge-sm-padding-x,\n padding-y: $kendo-badge-sm-padding-y,\n font-size: $kendo-badge-sm-font-size,\n line-height: $kendo-badge-sm-line-height,\n min-width: $kendo-badge-sm-min-width\n ),\n md: (\n padding-x: $kendo-badge-md-padding-x,\n padding-y: $kendo-badge-md-padding-y,\n font-size: $kendo-badge-md-font-size,\n line-height: $kendo-badge-md-line-height,\n min-width: $kendo-badge-md-min-width\n ),\n lg: (\n padding-x: $kendo-badge-lg-padding-x,\n padding-y: $kendo-badge-lg-padding-y,\n font-size: $kendo-badge-lg-font-size,\n line-height: $kendo-badge-lg-line-height,\n min-width: $kendo-badge-lg-min-width\n )\n)",
624
+ "value": "(\n sm: (\n padding-x: $kendo-badge-sm-padding-x,\n padding-y: $kendo-badge-sm-padding-y,\n gap: $kendo-badge-sm-gap,\n font-size: $kendo-badge-sm-font-size,\n line-height: $kendo-badge-sm-line-height,\n min-width: $kendo-badge-sm-min-width\n ),\n md: (\n padding-x: $kendo-badge-md-padding-x,\n padding-y: $kendo-badge-md-padding-y,\n gap: $kendo-badge-md-gap,\n font-size: $kendo-badge-md-font-size,\n line-height: $kendo-badge-md-line-height,\n min-width: $kendo-badge-md-min-width\n ),\n lg: (\n padding-x: $kendo-badge-lg-padding-x,\n padding-y: $kendo-badge-lg-padding-y,\n gap: $kendo-badge-lg-gap,\n font-size: $kendo-badge-lg-font-size,\n line-height: $kendo-badge-lg-line-height,\n min-width: $kendo-badge-lg-min-width\n )\n)",
625
625
  "scope": "default",
626
626
  "line": {
627
- "start": 35,
628
- "end": 57
627
+ "start": 40,
628
+ "end": 65
629
629
  }
630
630
  },
631
631
  "group": [
@@ -640,8 +640,8 @@
640
640
  {
641
641
  "description": "The theme colors map of the Badge.\n",
642
642
  "commentRange": {
643
- "start": 61,
644
- "end": 62
643
+ "start": 69,
644
+ "end": 70
645
645
  },
646
646
  "context": {
647
647
  "type": "variable",
@@ -649,8 +649,8 @@
649
649
  "value": "(\"base\", \"primary\", \"secondary\", \"tertiary\", \"info\", \"success\", \"warning\", \"error\")",
650
650
  "scope": "default",
651
651
  "line": {
652
- "start": 63,
653
- "end": 63
652
+ "start": 71,
653
+ "end": 71
654
654
  }
655
655
  },
656
656
  "group": [
@@ -715,8 +715,8 @@
715
715
  {
716
716
  "description": "The theme colors map of the Button.\n",
717
717
  "commentRange": {
718
- "start": 116,
719
- "end": 117
718
+ "start": 121,
719
+ "end": 122
720
720
  },
721
721
  "context": {
722
722
  "type": "variable",
@@ -724,8 +724,8 @@
724
724
  "value": "(\"base\", \"primary\", \"secondary\", \"tertiary\", \"info\", \"success\", \"warning\", \"error\", \"inverse\")",
725
725
  "scope": "default",
726
726
  "line": {
727
- "start": 118,
728
- "end": 118
727
+ "start": 123,
728
+ "end": 123
729
729
  }
730
730
  },
731
731
  "group": [
@@ -740,17 +740,17 @@
740
740
  {
741
741
  "description": "The sizes map of the Button.\n",
742
742
  "commentRange": {
743
- "start": 120,
744
- "end": 121
743
+ "start": 125,
744
+ "end": 126
745
745
  },
746
746
  "context": {
747
747
  "type": "variable",
748
748
  "name": "kendo-button-sizes",
749
- "value": "(\n xs: (\n padding-x: $kendo-button-xs-padding-x,\n padding-y: $kendo-button-xs-padding-y,\n font-size: $kendo-button-xs-font-size,\n line-height: $kendo-button-xs-line-height\n ),\n sm: (\n padding-x: $kendo-button-sm-padding-x,\n padding-y: $kendo-button-sm-padding-y,\n font-size: $kendo-button-sm-font-size,\n line-height: $kendo-button-sm-line-height\n ),\n md: (\n padding-x: $kendo-button-md-padding-x,\n padding-y: $kendo-button-md-padding-y,\n font-size: $kendo-button-md-font-size,\n line-height: $kendo-button-md-line-height\n ),\n lg: (\n padding-x: $kendo-button-lg-padding-x,\n padding-y: $kendo-button-lg-padding-y,\n font-size: $kendo-button-lg-font-size,\n line-height: $kendo-button-lg-line-height\n )\n)",
749
+ "value": "(\n xs: (\n gap: $kendo-button-xs-gap,\n padding-x: $kendo-button-xs-padding-x,\n padding-y: $kendo-button-xs-padding-y,\n font-size: $kendo-button-xs-font-size,\n line-height: $kendo-button-xs-line-height\n ),\n sm: (\n gap: $kendo-button-sm-gap,\n padding-x: $kendo-button-sm-padding-x,\n padding-y: $kendo-button-sm-padding-y,\n font-size: $kendo-button-sm-font-size,\n line-height: $kendo-button-sm-line-height\n ),\n md: (\n gap: $kendo-button-md-gap,\n padding-x: $kendo-button-md-padding-x,\n padding-y: $kendo-button-md-padding-y,\n font-size: $kendo-button-md-font-size,\n line-height: $kendo-button-md-line-height\n ),\n lg: (\n gap: $kendo-button-lg-gap,\n padding-x: $kendo-button-lg-padding-x,\n padding-y: $kendo-button-lg-padding-y,\n font-size: $kendo-button-lg-font-size,\n line-height: $kendo-button-lg-line-height\n )\n)",
750
750
  "scope": "default",
751
751
  "line": {
752
- "start": 122,
753
- "end": 147
752
+ "start": 127,
753
+ "end": 156
754
754
  }
755
755
  },
756
756
  "group": [
@@ -11059,17 +11059,17 @@
11059
11059
  {
11060
11060
  "description": "The sizes map of the Badge.\n",
11061
11061
  "commentRange": {
11062
- "start": 33,
11063
- "end": 34
11062
+ "start": 38,
11063
+ "end": 39
11064
11064
  },
11065
11065
  "context": {
11066
11066
  "type": "variable",
11067
11067
  "name": "kendo-badge-sizes",
11068
- "value": "(\n sm: (\n padding-x: $kendo-badge-sm-padding-x,\n padding-y: $kendo-badge-sm-padding-y,\n font-size: $kendo-badge-sm-font-size,\n line-height: $kendo-badge-sm-line-height,\n min-width: $kendo-badge-sm-min-width\n ),\n md: (\n padding-x: $kendo-badge-md-padding-x,\n padding-y: $kendo-badge-md-padding-y,\n font-size: $kendo-badge-md-font-size,\n line-height: $kendo-badge-md-line-height,\n min-width: $kendo-badge-md-min-width\n ),\n lg: (\n padding-x: $kendo-badge-lg-padding-x,\n padding-y: $kendo-badge-lg-padding-y,\n font-size: $kendo-badge-lg-font-size,\n line-height: $kendo-badge-lg-line-height,\n min-width: $kendo-badge-lg-min-width\n )\n)",
11068
+ "value": "(\n sm: (\n padding-x: $kendo-badge-sm-padding-x,\n padding-y: $kendo-badge-sm-padding-y,\n gap: $kendo-badge-sm-gap,\n font-size: $kendo-badge-sm-font-size,\n line-height: $kendo-badge-sm-line-height,\n min-width: $kendo-badge-sm-min-width\n ),\n md: (\n padding-x: $kendo-badge-md-padding-x,\n padding-y: $kendo-badge-md-padding-y,\n gap: $kendo-badge-md-gap,\n font-size: $kendo-badge-md-font-size,\n line-height: $kendo-badge-md-line-height,\n min-width: $kendo-badge-md-min-width\n ),\n lg: (\n padding-x: $kendo-badge-lg-padding-x,\n padding-y: $kendo-badge-lg-padding-y,\n gap: $kendo-badge-lg-gap,\n font-size: $kendo-badge-lg-font-size,\n line-height: $kendo-badge-lg-line-height,\n min-width: $kendo-badge-lg-min-width\n )\n)",
11069
11069
  "scope": "default",
11070
11070
  "line": {
11071
- "start": 35,
11072
- "end": 57
11071
+ "start": 40,
11072
+ "end": 65
11073
11073
  }
11074
11074
  },
11075
11075
  "group": [
@@ -11084,8 +11084,8 @@
11084
11084
  {
11085
11085
  "description": "The theme colors map of the Badge.\n",
11086
11086
  "commentRange": {
11087
- "start": 61,
11088
- "end": 62
11087
+ "start": 69,
11088
+ "end": 70
11089
11089
  },
11090
11090
  "context": {
11091
11091
  "type": "variable",
@@ -11093,8 +11093,8 @@
11093
11093
  "value": "(\"base\", \"primary\", \"secondary\", \"tertiary\", \"info\", \"success\", \"warning\", \"error\")",
11094
11094
  "scope": "default",
11095
11095
  "line": {
11096
- "start": 63,
11097
- "end": 63
11096
+ "start": 71,
11097
+ "end": 71
11098
11098
  }
11099
11099
  },
11100
11100
  "group": [
@@ -11491,8 +11491,8 @@
11491
11491
  {
11492
11492
  "description": "The theme colors map of the Button.\n",
11493
11493
  "commentRange": {
11494
- "start": 116,
11495
- "end": 117
11494
+ "start": 121,
11495
+ "end": 122
11496
11496
  },
11497
11497
  "context": {
11498
11498
  "type": "variable",
@@ -11500,8 +11500,8 @@
11500
11500
  "value": "(\"base\", \"primary\", \"secondary\", \"tertiary\", \"info\", \"success\", \"warning\", \"error\", \"inverse\")",
11501
11501
  "scope": "default",
11502
11502
  "line": {
11503
- "start": 118,
11504
- "end": 118
11503
+ "start": 123,
11504
+ "end": 123
11505
11505
  }
11506
11506
  },
11507
11507
  "group": [
@@ -11516,17 +11516,17 @@
11516
11516
  {
11517
11517
  "description": "The sizes map of the Button.\n",
11518
11518
  "commentRange": {
11519
- "start": 120,
11520
- "end": 121
11519
+ "start": 125,
11520
+ "end": 126
11521
11521
  },
11522
11522
  "context": {
11523
11523
  "type": "variable",
11524
11524
  "name": "kendo-button-sizes",
11525
- "value": "(\n xs: (\n padding-x: $kendo-button-xs-padding-x,\n padding-y: $kendo-button-xs-padding-y,\n font-size: $kendo-button-xs-font-size,\n line-height: $kendo-button-xs-line-height\n ),\n sm: (\n padding-x: $kendo-button-sm-padding-x,\n padding-y: $kendo-button-sm-padding-y,\n font-size: $kendo-button-sm-font-size,\n line-height: $kendo-button-sm-line-height\n ),\n md: (\n padding-x: $kendo-button-md-padding-x,\n padding-y: $kendo-button-md-padding-y,\n font-size: $kendo-button-md-font-size,\n line-height: $kendo-button-md-line-height\n ),\n lg: (\n padding-x: $kendo-button-lg-padding-x,\n padding-y: $kendo-button-lg-padding-y,\n font-size: $kendo-button-lg-font-size,\n line-height: $kendo-button-lg-line-height\n )\n)",
11525
+ "value": "(\n xs: (\n gap: $kendo-button-xs-gap,\n padding-x: $kendo-button-xs-padding-x,\n padding-y: $kendo-button-xs-padding-y,\n font-size: $kendo-button-xs-font-size,\n line-height: $kendo-button-xs-line-height\n ),\n sm: (\n gap: $kendo-button-sm-gap,\n padding-x: $kendo-button-sm-padding-x,\n padding-y: $kendo-button-sm-padding-y,\n font-size: $kendo-button-sm-font-size,\n line-height: $kendo-button-sm-line-height\n ),\n md: (\n gap: $kendo-button-md-gap,\n padding-x: $kendo-button-md-padding-x,\n padding-y: $kendo-button-md-padding-y,\n font-size: $kendo-button-md-font-size,\n line-height: $kendo-button-md-line-height\n ),\n lg: (\n gap: $kendo-button-lg-gap,\n padding-x: $kendo-button-lg-padding-x,\n padding-y: $kendo-button-lg-padding-y,\n font-size: $kendo-button-lg-font-size,\n line-height: $kendo-button-lg-line-height\n )\n)",
11526
11526
  "scope": "default",
11527
11527
  "line": {
11528
- "start": 122,
11529
- "end": 147
11528
+ "start": 127,
11529
+ "end": 156
11530
11530
  }
11531
11531
  },
11532
11532
  "group": [
package/dist/meta/sassdoc-raw-data.json CHANGED
@@ -614,17 +614,17 @@
614
614
  {
615
615
  "description": "The sizes map of the Badge.\n",
616
616
  "commentRange": {
617
- "start": 33,
618
- "end": 34
617
+ "start": 38,
618
+ "end": 39
619
619
  },
620
620
  "context": {
621
621
  "type": "variable",
622
622
  "name": "kendo-badge-sizes",
623
- "value": "(\n sm: (\n padding-x: $kendo-badge-sm-padding-x,\n padding-y: $kendo-badge-sm-padding-y,\n font-size: $kendo-badge-sm-font-size,\n line-height: $kendo-badge-sm-line-height,\n min-width: $kendo-badge-sm-min-width\n ),\n md: (\n padding-x: $kendo-badge-md-padding-x,\n padding-y: $kendo-badge-md-padding-y,\n font-size: $kendo-badge-md-font-size,\n line-height: $kendo-badge-md-line-height,\n min-width: $kendo-badge-md-min-width\n ),\n lg: (\n padding-x: $kendo-badge-lg-padding-x,\n padding-y: $kendo-badge-lg-padding-y,\n font-size: $kendo-badge-lg-font-size,\n line-height: $kendo-badge-lg-line-height,\n min-width: $kendo-badge-lg-min-width\n )\n)",
623
+ "value": "(\n sm: (\n padding-x: $kendo-badge-sm-padding-x,\n padding-y: $kendo-badge-sm-padding-y,\n gap: $kendo-badge-sm-gap,\n font-size: $kendo-badge-sm-font-size,\n line-height: $kendo-badge-sm-line-height,\n min-width: $kendo-badge-sm-min-width\n ),\n md: (\n padding-x: $kendo-badge-md-padding-x,\n padding-y: $kendo-badge-md-padding-y,\n gap: $kendo-badge-md-gap,\n font-size: $kendo-badge-md-font-size,\n line-height: $kendo-badge-md-line-height,\n min-width: $kendo-badge-md-min-width\n ),\n lg: (\n padding-x: $kendo-badge-lg-padding-x,\n padding-y: $kendo-badge-lg-padding-y,\n gap: $kendo-badge-lg-gap,\n font-size: $kendo-badge-lg-font-size,\n line-height: $kendo-badge-lg-line-height,\n min-width: $kendo-badge-lg-min-width\n )\n)",
624
624
  "scope": "default",
625
625
  "line": {
626
- "start": 35,
627
- "end": 57
626
+ "start": 40,
627
+ "end": 65
628
628
  }
629
629
  },
630
630
  "group": [
@@ -639,8 +639,8 @@
639
639
  {
640
640
  "description": "The theme colors map of the Badge.\n",
641
641
  "commentRange": {
642
- "start": 61,
643
- "end": 62
642
+ "start": 69,
643
+ "end": 70
644
644
  },
645
645
  "context": {
646
646
  "type": "variable",
@@ -648,8 +648,8 @@
648
648
  "value": "(\"base\", \"primary\", \"secondary\", \"tertiary\", \"info\", \"success\", \"warning\", \"error\")",
649
649
  "scope": "default",
650
650
  "line": {
651
- "start": 63,
652
- "end": 63
651
+ "start": 71,
652
+ "end": 71
653
653
  }
654
654
  },
655
655
  "group": [
@@ -714,8 +714,8 @@
714
714
  {
715
715
  "description": "The theme colors map of the Button.\n",
716
716
  "commentRange": {
717
- "start": 116,
718
- "end": 117
717
+ "start": 121,
718
+ "end": 122
719
719
  },
720
720
  "context": {
721
721
  "type": "variable",
@@ -723,8 +723,8 @@
723
723
  "value": "(\"base\", \"primary\", \"secondary\", \"tertiary\", \"info\", \"success\", \"warning\", \"error\", \"inverse\")",
724
724
  "scope": "default",
725
725
  "line": {
726
- "start": 118,
727
- "end": 118
726
+ "start": 123,
727
+ "end": 123
728
728
  }
729
729
  },
730
730
  "group": [
@@ -739,17 +739,17 @@
739
739
  {
740
740
  "description": "The sizes map of the Button.\n",
741
741
  "commentRange": {
742
- "start": 120,
743
- "end": 121
742
+ "start": 125,
743
+ "end": 126
744
744
  },
745
745
  "context": {
746
746
  "type": "variable",
747
747
  "name": "kendo-button-sizes",
748
- "value": "(\n xs: (\n padding-x: $kendo-button-xs-padding-x,\n padding-y: $kendo-button-xs-padding-y,\n font-size: $kendo-button-xs-font-size,\n line-height: $kendo-button-xs-line-height\n ),\n sm: (\n padding-x: $kendo-button-sm-padding-x,\n padding-y: $kendo-button-sm-padding-y,\n font-size: $kendo-button-sm-font-size,\n line-height: $kendo-button-sm-line-height\n ),\n md: (\n padding-x: $kendo-button-md-padding-x,\n padding-y: $kendo-button-md-padding-y,\n font-size: $kendo-button-md-font-size,\n line-height: $kendo-button-md-line-height\n ),\n lg: (\n padding-x: $kendo-button-lg-padding-x,\n padding-y: $kendo-button-lg-padding-y,\n font-size: $kendo-button-lg-font-size,\n line-height: $kendo-button-lg-line-height\n )\n)",
748
+ "value": "(\n xs: (\n gap: $kendo-button-xs-gap,\n padding-x: $kendo-button-xs-padding-x,\n padding-y: $kendo-button-xs-padding-y,\n font-size: $kendo-button-xs-font-size,\n line-height: $kendo-button-xs-line-height\n ),\n sm: (\n gap: $kendo-button-sm-gap,\n padding-x: $kendo-button-sm-padding-x,\n padding-y: $kendo-button-sm-padding-y,\n font-size: $kendo-button-sm-font-size,\n line-height: $kendo-button-sm-line-height\n ),\n md: (\n gap: $kendo-button-md-gap,\n padding-x: $kendo-button-md-padding-x,\n padding-y: $kendo-button-md-padding-y,\n font-size: $kendo-button-md-font-size,\n line-height: $kendo-button-md-line-height\n ),\n lg: (\n gap: $kendo-button-lg-gap,\n padding-x: $kendo-button-lg-padding-x,\n padding-y: $kendo-button-lg-padding-y,\n font-size: $kendo-button-lg-font-size,\n line-height: $kendo-button-lg-line-height\n )\n)",
749
749
  "scope": "default",
750
750
  "line": {
751
- "start": 122,
752
- "end": 147
751
+ "start": 127,
752
+ "end": 156
753
753
  }
754
754
  },
755
755
  "group": [
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progress/kendo-theme-core",
3
3
  "description": "A collection of functions and mixins used for building themes for Kendo UI",
4
- "version": "14.7.0-dev.1",
4
+ "version": "14.7.0-dev.11",
5
5
  "author": "Progress",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
package/scss/components/badge/_layout.scss CHANGED
@@ -31,6 +31,10 @@
31
31
  box-sizing: border-box;
32
32
  }
33
33
 
34
+ .k-badge-text {
35
+ padding-inline: $kendo-badge-text-padding-x;
36
+ }
37
+
34
38
  // Roundness
35
39
  @each $roundness in $kendo-badge-roundness {
36
40
  #{k-when-default($kendo-badge-default-roundness, $roundness)}
@@ -43,6 +47,7 @@
43
47
  @each $size, $size-props in $kendo-badge-sizes {
44
48
  $_padding-x: map.get( $size-props, padding-x );
45
49
  $_padding-y: map.get( $size-props, padding-y );
50
+ $_gap: map.get( $size-props, gap );
46
51
  $_font-size: map.get( $size-props, font-size );
47
52
  $_line-height: map.get( $size-props, line-height );
48
53
  $_min-width: map.get( $size-props, min-width );
@@ -54,6 +59,7 @@
54
59
  font-size: $_font-size;
55
60
  line-height: $_line-height;
56
61
  min-width: $_min-width;
62
+ gap: $_gap;
57
63
 
58
64
  &:empty {
59
65
  padding: $_padding-y;
@@ -62,6 +68,10 @@
62
68
  }
63
69
  }
64
70
  }
71
+ .k-badge:has(> .k-badge-icon:only-child) {
72
+ padding-inline: 0;
73
+ aspect-ratio: 1;
74
+ }
65
75
  .k-badge > * {
66
76
  color: inherit;
67
77
  }
package/scss/components/badge/_theme.scss CHANGED
@@ -19,6 +19,19 @@
19
19
  }
20
20
  }
21
21
 
22
+ // Tint badges
23
+ #{k-when-default($kendo-badge-default-fill-mode, "tint")}
24
+ &.k-badge-tint {
25
+ @each $name in $kendo-badge-theme-colors {
26
+ #{k-when-default($kendo-badge-default-theme-color, $name)}
27
+ &.k-badge-#{$name} {
28
+ border-color: k-color(#{$name}-subtle);
29
+ color: k-color(#{$name}-on-subtle);
30
+ background-color: k-color(#{$name}-subtle);
31
+ }
32
+ }
33
+ }
34
+
22
35
  // Outline badges
23
36
  #{k-when-default($kendo-badge-default-fill-mode, "outline")}
24
37
  &.k-badge-outline {
package/scss/components/badge/_variables.scss CHANGED
@@ -15,6 +15,11 @@ $kendo-badge-sm-padding-y: null !default;
15
15
  $kendo-badge-md-padding-y: null !default;
16
16
  $kendo-badge-lg-padding-y: null !default;
17
17
 
18
+ $kendo-badge-text-padding-x: null !default;
19
+ $kendo-badge-sm-gap: null !default;
20
+ $kendo-badge-md-gap: null !default;
21
+ $kendo-badge-lg-gap: null !default;
22
+
18
23
  $kendo-badge-font-size: null !default;
19
24
  $kendo-badge-sm-font-size: null !default;
20
25
  $kendo-badge-md-font-size: null !default;
@@ -36,6 +41,7 @@ $kendo-badge-sizes: (
36
41
  sm: (
37
42
  padding-x: $kendo-badge-sm-padding-x,
38
43
  padding-y: $kendo-badge-sm-padding-y,
44
+ gap: $kendo-badge-sm-gap,
39
45
  font-size: $kendo-badge-sm-font-size,
40
46
  line-height: $kendo-badge-sm-line-height,
41
47
  min-width: $kendo-badge-sm-min-width
@@ -43,6 +49,7 @@ $kendo-badge-sizes: (
43
49
  md: (
44
50
  padding-x: $kendo-badge-md-padding-x,
45
51
  padding-y: $kendo-badge-md-padding-y,
52
+ gap: $kendo-badge-md-gap,
46
53
  font-size: $kendo-badge-md-font-size,
47
54
  line-height: $kendo-badge-md-line-height,
48
55
  min-width: $kendo-badge-md-min-width
@@ -50,6 +57,7 @@ $kendo-badge-sizes: (
50
57
  lg: (
51
58
  padding-x: $kendo-badge-lg-padding-x,
52
59
  padding-y: $kendo-badge-lg-padding-y,
60
+ gap: $kendo-badge-lg-gap,
53
61
  font-size: $kendo-badge-lg-font-size,
54
62
  line-height: $kendo-badge-lg-line-height,
55
63
  min-width: $kendo-badge-lg-min-width
package/scss/components/button/_layout.scss CHANGED
@@ -69,6 +69,7 @@
69
69
 
70
70
  // Sizes
71
71
  @each $size, $size-props in $kendo-button-sizes {
72
+ $_gap: map.get( $size-props, gap );
72
73
  $_padding-x: map.get( $size-props, padding-x );
73
74
  $_padding-y: map.get( $size-props, padding-y );
74
75
  $_font-size: map.get( $size-props, font-size );
@@ -78,6 +79,7 @@
78
79
  &.k-button-#{$size} {
79
80
  padding-block: $_padding-y;
80
81
  padding-inline: $_padding-x;
82
+ gap: $_gap;
81
83
  font-size: $_font-size;
82
84
  line-height: $_line-height;
83
85
 
package/scss/components/button/_variables.scss CHANGED
@@ -11,6 +11,11 @@ $kendo-button-border-radius: null !default;
11
11
 
12
12
  $kendo-button-gap: null !default;
13
13
 
14
+ $kendo-button-xs-gap: null !default;
15
+ $kendo-button-sm-gap: null !default;
16
+ $kendo-button-md-gap: null !default;
17
+ $kendo-button-lg-gap: null !default;
18
+
14
19
  $kendo-button-xs-padding-x: null !default;
15
20
  $kendo-button-sm-padding-x: null !default;
16
21
  $kendo-button-md-padding-x: null !default;
@@ -121,24 +126,28 @@ $kendo-button-theme-colors: ("base", "primary", "secondary", "tertiary", "info",
121
126
  /// @group button
122
127
  $kendo-button-sizes: (
123
128
  xs: (
129
+ gap: $kendo-button-xs-gap,
124
130
  padding-x: $kendo-button-xs-padding-x,
125
131
  padding-y: $kendo-button-xs-padding-y,
126
132
  font-size: $kendo-button-xs-font-size,
127
133
  line-height: $kendo-button-xs-line-height
128
134
  ),
129
135
  sm: (
136
+ gap: $kendo-button-sm-gap,
130
137
  padding-x: $kendo-button-sm-padding-x,
131
138
  padding-y: $kendo-button-sm-padding-y,
132
139
  font-size: $kendo-button-sm-font-size,
133
140
  line-height: $kendo-button-sm-line-height
134
141
  ),
135
142
  md: (
143
+ gap: $kendo-button-md-gap,
136
144
  padding-x: $kendo-button-md-padding-x,
137
145
  padding-y: $kendo-button-md-padding-y,
138
146
  font-size: $kendo-button-md-font-size,
139
147
  line-height: $kendo-button-md-line-height
140
148
  ),
141
149
  lg: (
150
+ gap: $kendo-button-lg-gap,
142
151
  padding-x: $kendo-button-lg-padding-x,
143
152
  padding-y: $kendo-button-lg-padding-y,
144
153
  font-size: $kendo-button-lg-font-size,
package/scss/components/imageeditor/_layout.scss CHANGED
@@ -264,6 +264,7 @@
264
264
  display: flex;
265
265
  flex-direction: column;
266
266
  position: relative;
267
+ flex: none;
267
268
  }
268
269
 
269
270
  // Placeholder: replaces the canvas for non-editable states (empty, loading, error)
@@ -295,6 +296,19 @@
295
296
  font-size: var(--kendo-font-size-xl);
296
297
  font-weight: var(--kendo-font-weight-medium);
297
298
  }
299
+
300
+ // Upload renders as a bare button: no frame, background or drop hint
301
+ .k-imageeditor-placeholder-upload {
302
+ margin-block-start: k-spacing(6);
303
+ border-width: 0;
304
+ background-color: transparent;
305
+ overflow: visible;
306
+
307
+ .k-upload-dropzone {
308
+ padding: 0;
309
+ justify-content: center;
310
+ }
311
+ }
298
312
  }
299
313
 
300
314
 
@@ -382,11 +396,35 @@
382
396
  .k-imageeditor-option-list {
383
397
  position: relative;
384
398
  width: 100%;
399
+
400
+ // Overlays live on the non-scrolling wrapper so they stay fixed while the items scroll; the -3px insets match the items' negative margins so they cover the selected chip's shadow ring.
401
+ &.k-imageeditor-option-list-scrollable {
402
+ &::before,
403
+ &::after {
404
+ content: "";
405
+ aspect-ratio: 1;
406
+ position: absolute;
407
+ inset-block: -3px;
408
+ z-index: k-z-index("base", 3);
409
+ pointer-events: none;
410
+ }
411
+
412
+ &::before {
413
+ inset-inline-start: -3px;
414
+ }
415
+
416
+ &::after {
417
+ inset-inline-end: -3px;
418
+ }
419
+
420
+ &.k-imageeditor-option-list-scrollable-start::before,
421
+ &.k-imageeditor-option-list-scrollable-end::after {
422
+ display: none;
423
+ }
424
+ }
385
425
  }
386
426
 
387
- // Actual scrolling element. The scroll-fade overlay lives here (rather than on the
388
- // non-scrolling .k-imageeditor-option-list wrapper) so it aligns with the negative
389
- // margins below and fully covers the selected chip's shadow ring at the scroll edges.
427
+ // Actual scrolling element
390
428
  .k-imageeditor-option-list-items {
391
429
  display: flex;
392
430
  flex-flow: row nowrap;
@@ -405,32 +443,6 @@
405
443
  &::-webkit-scrollbar {
406
444
  display: none;
407
445
  }
408
-
409
- .k-imageeditor-option-list-scrollable & {
410
- &::before,
411
- &::after {
412
- content: "";
413
- height: 100%;
414
- aspect-ratio: 1;
415
- position: absolute;
416
- inset-block-start: 0;
417
- z-index: k-z-index("base", 3);
418
- pointer-events: none;
419
- }
420
-
421
- &::before {
422
- inset-inline-start: 0;
423
- }
424
-
425
- &::after {
426
- inset-inline-end: 0;
427
- }
428
- }
429
-
430
- .k-imageeditor-option-list-scrollable-start &::before,
431
- .k-imageeditor-option-list-scrollable-end &::after {
432
- display: none;
433
- }
434
446
  }
435
447
 
436
448
  .k-imageeditor-option-preview {
@@ -469,6 +481,23 @@
469
481
  inset-inline-start: 0;
470
482
  }
471
483
 
484
+ // Dims the image around the crop frame. The frame's position and size are passed through
485
+ // --crop-x, --crop-y, --crop-w and --crop-h (set on the overlay) and cut out of the layer.
486
+ .k-imageeditor-crop-dim {
487
+ position: absolute;
488
+ inset: 0;
489
+ pointer-events: none;
490
+ clip-path: polygon(
491
+ evenodd,
492
+ 0 0, 100% 0, 100% 100%, 0 100%, 0 0,
493
+ var(--crop-x, 0px) var(--crop-y, 0px),
494
+ var(--crop-x, 0px) calc(var(--crop-y, 0px) + var(--crop-h, 0px)),
495
+ calc(var(--crop-x, 0px) + var(--crop-w, 0px)) calc(var(--crop-y, 0px) + var(--crop-h, 0px)),
496
+ calc(var(--crop-x, 0px) + var(--crop-w, 0px)) var(--crop-y, 0px),
497
+ var(--crop-x, 0px) var(--crop-y, 0px)
498
+ );
499
+ }
500
+
472
501
  .k-imageeditor-crop {
473
502
  @include kendo-image-editor-frame-base();
474
503
 
@@ -604,6 +633,23 @@
604
633
  }
605
634
  }
606
635
 
636
+ // Rotation handle: anchored below the bottom edge of the selection frame, centered horizontally
637
+ .k-rotate-handle {
638
+ padding: $kendo-image-editor-rotate-handle-padding;
639
+ border-width: $kendo-image-editor-handle-border-width;
640
+ border-style: solid;
641
+ border-radius: $kendo-image-editor-handle-border-radius;
642
+ display: flex;
643
+ align-items: center;
644
+ justify-content: center;
645
+ position: absolute;
646
+ top: calc(100% + #{$kendo-image-editor-rotate-handle-offset});
647
+ left: 50%;
648
+ transform: translateX(-50%);
649
+ box-sizing: border-box;
650
+ cursor: grab;
651
+ }
652
+
607
653
  // Mobile: single scoping class for every part that needs a different layout on small screens
608
654
  .k-imageeditor-adaptive {
609
655
  display: flex;
package/scss/components/imageeditor/_theme.scss CHANGED
@@ -42,7 +42,7 @@
42
42
  }
43
43
 
44
44
  // Option list scroll-fade overlay (aspect ratios, shapes, presets, ...)
45
- .k-imageeditor-option-list-scrollable .k-imageeditor-option-list-items {
45
+ .k-imageeditor-option-list-scrollable {
46
46
  &::before {
47
47
  background: linear-gradient(270deg, $kendo-image-editor-option-list-scroll-gradient);
48
48
  }
@@ -119,6 +119,12 @@
119
119
  background-color: $kendo-image-editor-handle-bg;
120
120
  }
121
121
 
122
+ .k-rotate-handle {
123
+ color: $kendo-image-editor-handle-border;
124
+ border-color: $kendo-image-editor-handle-border;
125
+ background-color: $kendo-image-editor-handle-bg;
126
+ }
127
+
122
128
  // Crop tool's L-bracket corner handles
123
129
  .k-imageeditor-crop {
124
130
  .k-resize-sw,
@@ -140,8 +146,8 @@
140
146
  }
141
147
  }
142
148
 
143
- // Crop Overlay: accent-tinted layer (matches the frame/handle color) stacked over a neutral dark scrim
144
- .k-imageeditor-crop-overlay {
149
+ // Crop Dim: accent-tinted layer (matches the frame/handle color) stacked over a neutral dark scrim
150
+ .k-imageeditor-crop-dim {
145
151
  background-image:
146
152
  linear-gradient($kendo-image-editor-crop-overlay-accent-bg, $kendo-image-editor-crop-overlay-accent-bg),
147
153
  linear-gradient($kendo-image-editor-crop-overlay-bg, $kendo-image-editor-crop-overlay-bg);
package/scss/components/imageeditor/_variables.scss CHANGED
@@ -50,6 +50,9 @@ $kendo-image-editor-handle-border-radius: null !default;
50
50
 
51
51
  $kendo-image-editor-scale-handle-size: null !default;
52
52
 
53
+ $kendo-image-editor-rotate-handle-offset: null !default;
54
+ $kendo-image-editor-rotate-handle-padding: null !default;
55
+
53
56
  $kendo-image-editor-bg: null !default;
54
57
  $kendo-image-editor-text: null !default;
55
58
  $kendo-image-editor-border: null !default;
package/scss/components/listbox/_layout.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use "../../color-system/_constants.scss" as *;
2
+ @use "../../z-index/index.scss" as *;
2
3
  @use "./variables.scss" as *;
3
4
 
4
5
  @mixin kendo-listbox--layout-base() {
@@ -20,7 +21,45 @@
20
21
 
21
22
  .k-listbox-actions {
22
23
  display: flex;
24
+ flex: none;
23
25
  gap: $kendo-listbox-button-spacing;
26
+ position: relative;
27
+ min-width: 0;
28
+ min-height: 0;
29
+
30
+ &.k-listbox-actions-scrollable {
31
+ &::before,
32
+ &::after {
33
+ content: "";
34
+ aspect-ratio: 1;
35
+ position: absolute;
36
+ z-index: k-z-index("base", 3);
37
+ pointer-events: none;
38
+ }
39
+
40
+ &.k-listbox-actions-scrollable-start::before,
41
+ &.k-listbox-actions-scrollable-end::after {
42
+ display: none;
43
+ }
44
+ }
45
+ }
46
+
47
+ .k-listbox-actions-items {
48
+ padding: $kendo-listbox-actions-scroll-padding;
49
+ display: flex;
50
+ flex: 1 1 auto;
51
+ gap: $kendo-listbox-button-spacing;
52
+ min-width: 0;
53
+ min-height: 0;
54
+ scrollbar-width: none;
55
+
56
+ &::-webkit-scrollbar {
57
+ display: none;
58
+ }
59
+
60
+ > * {
61
+ flex-shrink: 0;
62
+ }
24
63
  }
25
64
 
26
65
  &.k-listbox-actions-left,
@@ -29,6 +68,28 @@
29
68
 
30
69
  .k-listbox-actions {
31
70
  flex-direction: column;
71
+
72
+ &.k-listbox-actions-scrollable {
73
+ &::before,
74
+ &::after {
75
+ height: 15px;
76
+ width: 100%;
77
+ }
78
+
79
+ &::before {
80
+ inset-block-start: 0;
81
+ }
82
+
83
+ &::after {
84
+ inset-block-end: 0;
85
+ }
86
+ }
87
+ }
88
+
89
+ .k-listbox-actions-items {
90
+ flex-direction: column;
91
+ overflow-x: hidden;
92
+ overflow-y: auto;
32
93
  }
33
94
  }
34
95
 
@@ -42,6 +103,29 @@
42
103
 
43
104
  .k-listbox-actions {
44
105
  flex-direction: row;
106
+
107
+ &.k-listbox-actions-scrollable {
108
+ &::before,
109
+ &::after {
110
+ inset-block-start: 0;
111
+ height: 100%;
112
+ width: 15px;
113
+ }
114
+
115
+ &::before {
116
+ inset-inline-start: 0;
117
+ }
118
+
119
+ &::after {
120
+ inset-inline-end: 0;
121
+ }
122
+ }
123
+ }
124
+
125
+ .k-listbox-actions-items {
126
+ flex-direction: row;
127
+ overflow-x: auto;
128
+ overflow-y: hidden;
45
129
  }
46
130
  }
47
131
 
package/scss/components/listbox/_theme.scss CHANGED
@@ -16,6 +16,44 @@
16
16
  .k-drop-hint {
17
17
  border-block-start-color: k-color(primary);
18
18
  }
19
+
20
+ &.k-listbox-actions-left,
21
+ &.k-listbox-actions-right {
22
+ .k-listbox-actions-scrollable {
23
+ &::before {
24
+ background: linear-gradient(180deg, $kendo-listbox-actions-scroll-overlay);
25
+ }
26
+
27
+ &::after {
28
+ background: linear-gradient(0deg, $kendo-listbox-actions-scroll-overlay);
29
+ }
30
+ }
31
+ }
32
+
33
+ &.k-listbox-actions-top,
34
+ &.k-listbox-actions-bottom {
35
+ .k-listbox-actions-scrollable {
36
+ &::before {
37
+ background: linear-gradient(90deg, $kendo-listbox-actions-scroll-overlay);
38
+ }
39
+
40
+ &::after {
41
+ background: linear-gradient(270deg, $kendo-listbox-actions-scroll-overlay);
42
+ }
43
+ }
44
+ }
45
+ }
46
+
47
+ // RTL: reverse gradient directions for horizontal scrolling
48
+ :is(.k-rtl, [dir="rtl"]) .k-listbox:is(.k-listbox-actions-top, .k-listbox-actions-bottom) .k-listbox-actions-scrollable,
49
+ .k-listbox:is(.k-listbox-actions-top, .k-listbox-actions-bottom):is(.k-rtl, [dir="rtl"]) .k-listbox-actions-scrollable {
50
+ &::before {
51
+ background: linear-gradient(270deg, $kendo-listbox-actions-scroll-overlay);
52
+ }
53
+
54
+ &::after {
55
+ background: linear-gradient(90deg, $kendo-listbox-actions-scroll-overlay);
56
+ }
19
57
  }
20
58
 
21
59
  }
package/scss/components/listbox/_variables.scss CHANGED
@@ -15,6 +15,9 @@ $kendo-listbox-border: null !default;
15
15
 
16
16
  $kendo-listbox-drop-hint-width: null !default;
17
17
 
18
+ $kendo-listbox-actions-scroll-padding: null !default;
19
+ $kendo-listbox-actions-scroll-overlay: null !default;
20
+
18
21
  $kendo-listbox-scroller-padding-x: null !default;
19
22
  $kendo-listbox-scroller-padding-y: null !default;
20
23
  $kendo-listbox-border-radius: null !default;
package/scss/components/marquee/_theme.scss CHANGED
@@ -1,15 +1,24 @@
1
+ @use "../../color-system/_functions.scss" as *;
1
2
  @use "./_variables.scss" as *;
2
3
 
3
4
  @mixin kendo-marquee--theme-base() {
4
5
  // Marquee
6
+ .k-marquee {
7
+ --kendo-marquee-bg: var(--kendo-marquee-color);
8
+ // Contrast is computed against the bg as it renders: translucent over the surface
9
+ --kendo-marquee-on-color: oklch(from color-mix(in srgb, var(--kendo-marquee-bg) 60%, #{k-color(surface)}) clamp(0.10, (0.6 - l) * 99999, 1) 0 h);
10
+ }
5
11
  .k-marquee-color {
6
- color: $kendo-marquee-text;
7
- background-color: $kendo-marquee-bg;
8
- border-color: $kendo-marquee-border;
9
- opacity: .6;
12
+ color: var(--kendo-marquee-on-color, #{$kendo-marquee-text});
13
+ background-color: oklch(from var(--kendo-marquee-bg, #{$kendo-marquee-bg}) l c h / calc(alpha * .6));
14
+ border-color: oklch(from #{$kendo-marquee-border} l c h / calc(alpha * .6));
15
+ }
16
+ .k-scheduler-marquee::before,
17
+ .k-scheduler-marquee::after {
18
+ border-color: var(--kendo-marquee-bg, #{$kendo-marquee-bg});
10
19
  }
11
20
  .k-marquee-text {
12
- color: $kendo-marquee-text;
21
+ color: var(--kendo-marquee-on-color, #{$kendo-marquee-text});
13
22
  }
14
23
 
15
24
  // Text selection
package/scss/components/scheduler/_layout.scss CHANGED
@@ -555,10 +555,6 @@
555
555
  }
556
556
  }
557
557
 
558
- &.k-event-drag-hint .k-event-time {
559
- display: block;
560
- }
561
-
562
558
  .k-event-top-actions,
563
559
  .k-event-bottom-actions {
564
560
  position: absolute;
@@ -642,10 +638,6 @@
642
638
  .k-resize-handle {
643
639
  display: none;
644
640
  }
645
-
646
- .k-event-time {
647
- display: block;
648
- }
649
641
  }
650
642
 
651
643
 
package/scss/components/scheduler/_theme.scss CHANGED
@@ -112,18 +112,22 @@
112
112
  // Events
113
113
  .k-event {
114
114
  @include fill(
115
- $kendo-scheduler-event-text,
116
- $kendo-scheduler-event-bg,
115
+ var(--kendo-scheduler-event-on-color, $kendo-scheduler-event-text),
116
+ var(--kendo-scheduler-event-bg, $kendo-scheduler-event-bg),
117
117
  $kendo-scheduler-event-border,
118
118
  $kendo-scheduler-event-gradient
119
119
  );
120
120
  @include box-shadow( $kendo-scheduler-event-shadow );
121
121
 
122
+ --kendo-scheduler-event-bg: var(--kendo-scheduler-event-color);
123
+ --kendo-scheduler-event-on-color: oklch(from var(--kendo-scheduler-event-bg) clamp(0.10, (0.75 - l) * 99999, 1) 0 h);
124
+
125
+
122
126
  &:hover,
123
127
  &.k-hover {
124
128
  @include fill(
125
- $kendo-scheduler-event-hover-text,
126
- $kendo-scheduler-event-hover-bg,
129
+ var(--kendo-scheduler-event-on-color, $kendo-scheduler-event-hover-text),
130
+ var(--kendo-scheduler-event-bg, $kendo-scheduler-event-hover-bg),
127
131
  $kendo-scheduler-event-hover-border,
128
132
  $kendo-scheduler-event-hover-gradient
129
133
  );
@@ -132,8 +136,8 @@
132
136
 
133
137
  &.k-selected {
134
138
  @include fill(
135
- $kendo-scheduler-event-selected-text,
136
- $kendo-scheduler-event-selected-bg,
139
+ var(--kendo-scheduler-event-on-color, $kendo-scheduler-event-selected-text),
140
+ var(--kendo-scheduler-event-bg, $kendo-scheduler-event-selected-bg),
137
141
  $kendo-scheduler-event-selected-border,
138
142
  $kendo-scheduler-event-selected-gradient
139
143
  );
@@ -168,10 +172,6 @@
168
172
 
169
173
  // Resizing
170
174
  .k-scheduler-marquee {}
171
- .k-scheduler-marquee::before,
172
- .k-scheduler-marquee::after {
173
- border-color: k-color(primary);
174
- }
175
175
 
176
176
  // Day view
177
177
  .k-scheduler-dayview {}
package/scss/components/scheduler/_variables.scss CHANGED
@@ -39,8 +39,8 @@ $kendo-scheduler-event-border: null !default;
39
39
  $kendo-scheduler-event-gradient: null !default;
40
40
  $kendo-scheduler-event-shadow: null !default;
41
41
 
42
- $kendo-scheduler-event-hover-bg: null !default;
43
- $kendo-scheduler-event-hover-text: null !default;
42
+ $kendo-scheduler-event-hover-bg: $kendo-scheduler-event-bg !default;
43
+ $kendo-scheduler-event-hover-text: $kendo-scheduler-event-text !default;
44
44
  $kendo-scheduler-event-hover-border: null !default;
45
45
  $kendo-scheduler-event-hover-gradient: null !default;
46
46
  $kendo-scheduler-event-hover-shadow: null !default;