@progress/kendo-theme-fluent 14.4.0-dev.3 → 14.4.0-dev.4

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 (38) hide show
  1. package/dist/all.css +1 -1
  2. package/dist/fluent-1-dark.css +1 -1
  3. package/dist/fluent-1.css +1 -1
  4. package/dist/fluent-main-dark.css +1 -1
  5. package/dist/fluent-main.css +1 -1
  6. package/dist/meta/sassdoc-data.json +6650 -6488
  7. package/dist/meta/sassdoc-raw-data.json +3275 -3200
  8. package/dist/meta/variables.json +134 -55
  9. package/lib/swatches/all.json +1 -1
  10. package/lib/swatches/fluent-1-dark.json +1 -1
  11. package/lib/swatches/fluent-1.json +1 -1
  12. package/lib/swatches/fluent-main-dark.json +1 -1
  13. package/lib/swatches/fluent-main.json +1 -1
  14. package/package.json +4 -4
  15. package/scss/bottom-navigation/_variables.scss +2 -1
  16. package/scss/button/_layout.scss +15 -14
  17. package/scss/color-preview/_layout.scss +1 -1
  18. package/scss/drawer/_variables.scss +2 -1
  19. package/scss/filemanager/_variables.scss +5 -0
  20. package/scss/grid/_layout.scss +2 -1
  21. package/scss/grid/_variables.scss +9 -4
  22. package/scss/icons/_variables.scss +0 -41
  23. package/scss/input/_variables.scss +4 -3
  24. package/scss/map/_variables.scss +2 -1
  25. package/scss/menu/_variables.scss +13 -7
  26. package/scss/panelbar/_variables.scss +8 -2
  27. package/scss/pdf-viewer/_variables.scss +2 -1
  28. package/scss/pivotgrid/_layout.scss +3 -2
  29. package/scss/scheduler/_variables.scss +5 -0
  30. package/scss/spreadsheet/_variables.scss +2 -1
  31. package/scss/stepper/_variables.scss +5 -0
  32. package/scss/tabstrip/_variables.scss +5 -0
  33. package/scss/toolbar/_variables.scss +5 -0
  34. package/scss/tooltip/_variables.scss +5 -0
  35. package/scss/treelist/_layout.scss +2 -1
  36. package/scss/treeview/_layout.scss +4 -3
  37. package/scss/treeview/_variables.scss +5 -0
  38. package/scss/upload/_variables.scss +2 -1
@@ -1518,41 +1518,80 @@
1518
1518
  }
1519
1519
  }
1520
1520
  },
1521
- "kendo-icon-default-size": {
1521
+ "ki-icon-default-size": {
1522
1522
  "type": "String",
1523
1523
  "value": "\"md\""
1524
1524
  },
1525
- "kendo-icon-size": {
1525
+ "ki-icon-size": {
1526
1526
  "type": "Number",
1527
1527
  "value": "1rem"
1528
1528
  },
1529
- "kendo-icon-size-xs": {
1530
- "type": "Calculation",
1531
- "value": "calc(var(--kendo-icon-size, 1rem) * 0.75)"
1529
+ "ki-icon-size-xs": {
1530
+ "type": "String",
1531
+ "value": "var(--kendo-icon-size-xs, calc(var(--kendo-icon-size, 1rem) * 0.75))"
1532
1532
  },
1533
- "kendo-icon-size-sm": {
1534
- "type": "Calculation",
1535
- "value": "calc(var(--kendo-icon-size-sm, 1rem) * 0.875)"
1533
+ "ki-icon-size-sm": {
1534
+ "type": "String",
1535
+ "value": "var(--kendo-icon-size-sm, calc(var(--kendo-icon-size, 1rem) * 0.875))"
1536
+ },
1537
+ "ki-icon-size-md": {
1538
+ "type": "String",
1539
+ "value": "var(--kendo-icon-size-md, var(--kendo-icon-size, 1rem))"
1540
+ },
1541
+ "ki-icon-size-lg": {
1542
+ "type": "String",
1543
+ "value": "var(--kendo-icon-size-lg, calc(var(--kendo-icon-size, 1rem) * 1.25))"
1544
+ },
1545
+ "ki-icon-size-xl": {
1546
+ "type": "String",
1547
+ "value": "var(--kendo-icon-size-xl, calc(var(--kendo-icon-size, 1rem) * 1.5))"
1548
+ },
1549
+ "ki-icon-size-xxl": {
1550
+ "type": "String",
1551
+ "value": "var(--kendo-icon-size-xxl, calc(var(--kendo-icon-size, 1rem) * 2))"
1536
1552
  },
1537
- "kendo-icon-size-md": {
1553
+ "ki-icon-size-xxxl": {
1554
+ "type": "String",
1555
+ "value": "var(--kendo-icon-size-xxxl, calc(var(--kendo-icon-size, 1rem) * 3))"
1556
+ },
1557
+ "ki-icon-stroke-width": {
1538
1558
  "type": "Number",
1539
- "value": "1rem"
1559
+ "value": "1.5"
1540
1560
  },
1541
- "kendo-icon-size-lg": {
1542
- "type": "Calculation",
1543
- "value": "calc(var(--kendo-icon-size-lg, 1rem) * 1.25)"
1561
+ "ki-icon-sizes": {
1562
+ "type": "Map",
1563
+ "value": "(xs: var(--kendo-icon-size-xs, calc(var(--kendo-icon-size, 1rem) * 0.75)), sm: var(--kendo-icon-size-sm, calc(var(--kendo-icon-size, 1rem) * 0.875)), md: var(--kendo-icon-size-md, var(--kendo-icon-size, 1rem)), lg: var(--kendo-icon-size-lg, calc(var(--kendo-icon-size, 1rem) * 1.25)), xl: var(--kendo-icon-size-xl, calc(var(--kendo-icon-size, 1rem) * 1.5)), xxl: var(--kendo-icon-size-xxl, calc(var(--kendo-icon-size, 1rem) * 2)), xxxl: var(--kendo-icon-size-xxxl, calc(var(--kendo-icon-size, 1rem) * 3)))",
1564
+ "prettyValue": {
1565
+ "xs": "var(--kendo-icon-size-xs, calc(var(--kendo-icon-size, 1rem) * 0.75))",
1566
+ "sm": "var(--kendo-icon-size-sm, calc(var(--kendo-icon-size, 1rem) * 0.875))",
1567
+ "md": "var(--kendo-icon-size-md, var(--kendo-icon-size, 1rem))",
1568
+ "lg": "var(--kendo-icon-size-lg, calc(var(--kendo-icon-size, 1rem) * 1.25))",
1569
+ "xl": "var(--kendo-icon-size-xl, calc(var(--kendo-icon-size, 1rem) * 1.5))",
1570
+ "xxl": "var(--kendo-icon-size-xxl, calc(var(--kendo-icon-size, 1rem) * 2))",
1571
+ "xxxl": "var(--kendo-icon-size-xxxl, calc(var(--kendo-icon-size, 1rem) * 3))"
1572
+ }
1544
1573
  },
1545
- "kendo-icon-size-xl": {
1546
- "type": "Calculation",
1547
- "value": "calc(var(--kendo-icon-size, 1rem) * 1.5)"
1574
+ "ki-rotate-map": {
1575
+ "type": "Map",
1576
+ "value": "(0: 0deg, 45: 45deg, 90: 90deg, 135: 135deg, 180: 180deg, 225: 225deg, 270: 270deg, 315: 315deg)",
1577
+ "prettyValue": {
1578
+ "0": "0deg",
1579
+ "45": "45deg",
1580
+ "90": "90deg",
1581
+ "135": "135deg",
1582
+ "180": "180deg",
1583
+ "225": "225deg",
1584
+ "270": "270deg",
1585
+ "315": "315deg"
1586
+ }
1548
1587
  },
1549
- "kendo-icon-size-xxl": {
1550
- "type": "Calculation",
1551
- "value": "calc(var(--kendo-icon-size-xxl, 1rem) * 2)"
1588
+ "kendo-icon-default-size": {
1589
+ "type": "String",
1590
+ "value": "\"md\""
1552
1591
  },
1553
- "kendo-icon-size-xxxl": {
1554
- "type": "Calculation",
1555
- "value": "calc(var(--kendo-icon-size-xxxl, 1rem) * 3)"
1592
+ "kendo-icon-size": {
1593
+ "type": "Number",
1594
+ "value": "1rem"
1556
1595
  },
1557
1596
  "kendo-icon-spacing": {
1558
1597
  "type": "String",
@@ -3313,6 +3352,10 @@
3313
3352
  "type": "String",
3314
3353
  "value": "var(--kendo-tooltip-padding-x, var(--kendo-spacing-3))"
3315
3354
  },
3355
+ "kendo-tooltip-icon-spacing": {
3356
+ "type": "String",
3357
+ "value": "var(--kendo-tooltip-icon-spacing, var(--kendo-spacing-2))"
3358
+ },
3316
3359
  "kendo-tooltip-padding-y": {
3317
3360
  "type": "String",
3318
3361
  "value": "var(--kendo-tooltip-padding-y, var(--kendo-spacing-1\\.5))"
@@ -3933,14 +3976,14 @@
3933
3976
  },
3934
3977
  "kendo-input-sizes": {
3935
3978
  "type": "Map",
3936
- "value": "(sm: (padding-x: var(--kendo-spacing-2), padding-y: calc(var(--kendo-spacing-0\\.5) + 1px), font-size: var(--kendo-font-size), line-height: var(--kendo-line-height), icon-size: calc(var(--kendo-icon-size, 1rem) + calc(var(--kendo-input-padding-y, var(--kendo-spacing-1)) + 1px) * 2), button-padding-x: calc(var(--kendo-spacing-0\\.5) + 1px), button-padding-y: calc(var(--kendo-spacing-0\\.5) + 1px), button-width: calc(var(--kendo-line-height-lg) * 1em + calc(var(--kendo-button-sm-padding-y, var(--kendo-spacing-0\\.5)) + 1px) * 2)), md: (padding-x: var(--kendo-input-padding-x, var(--kendo-spacing-2\\.5)), padding-y: calc(var(--kendo-input-padding-y, var(--kendo-spacing-1)) + 1px), font-size: var(--kendo-input-font-size, var(--kendo-font-size)), line-height: var(--kendo-input-line-height, var(--kendo-line-height)), icon-size: calc(var(--kendo-icon-size, 1rem) + calc(var(--kendo-spacing-0\\.5) + 1px) * 2), button-padding-x: calc(var(--kendo-input-padding-y, var(--kendo-spacing-1)) + 1px), button-padding-y: calc(var(--kendo-input-padding-y, var(--kendo-spacing-1)) + 1px), button-width: calc(var(--kendo-line-height) * 1em + calc(var(--kendo-button-md-padding-y, var(--kendo-spacing-1)) + 1px) * 2)), lg: (padding-x: var(--kendo-spacing-4\\.5), padding-y: var(--kendo-spacing-2), font-size: var(--kendo-font-size-lg), line-height: var(--kendo-line-height-lg), icon-size: calc(var(--kendo-icon-size, 1rem) + var(--kendo-spacing-2) * 2), button-padding-x: var(--kendo-spacing-2), button-padding-y: var(--kendo-spacing-2), button-width: calc(var(--kendo-line-height-sm) * 1em + calc(var(--kendo-button-lg-padding-y, var(--kendo-spacing-2)) + 1px) * 2)))",
3979
+ "value": "(sm: (padding-x: var(--kendo-spacing-2), padding-y: calc(var(--kendo-spacing-0\\.5) + 1px), font-size: var(--kendo-font-size), line-height: var(--kendo-line-height), icon-size: calc(1rem + calc(var(--kendo-input-padding-y, var(--kendo-spacing-1)) + 1px) * 2), button-padding-x: calc(var(--kendo-spacing-0\\.5) + 1px), button-padding-y: calc(var(--kendo-spacing-0\\.5) + 1px), button-width: calc(var(--kendo-line-height-lg) * 1em + calc(var(--kendo-button-sm-padding-y, var(--kendo-spacing-0\\.5)) + 1px) * 2)), md: (padding-x: var(--kendo-input-padding-x, var(--kendo-spacing-2\\.5)), padding-y: calc(var(--kendo-input-padding-y, var(--kendo-spacing-1)) + 1px), font-size: var(--kendo-input-font-size, var(--kendo-font-size)), line-height: var(--kendo-input-line-height, var(--kendo-line-height)), icon-size: calc(1rem + calc(var(--kendo-spacing-0\\.5) + 1px) * 2), button-padding-x: calc(var(--kendo-input-padding-y, var(--kendo-spacing-1)) + 1px), button-padding-y: calc(var(--kendo-input-padding-y, var(--kendo-spacing-1)) + 1px), button-width: calc(var(--kendo-line-height) * 1em + calc(var(--kendo-button-md-padding-y, var(--kendo-spacing-1)) + 1px) * 2)), lg: (padding-x: var(--kendo-spacing-4\\.5), padding-y: var(--kendo-spacing-2), font-size: var(--kendo-font-size-lg), line-height: var(--kendo-line-height-lg), icon-size: calc(1rem + var(--kendo-spacing-2) * 2), button-padding-x: var(--kendo-spacing-2), button-padding-y: var(--kendo-spacing-2), button-width: calc(var(--kendo-line-height-sm) * 1em + calc(var(--kendo-button-lg-padding-y, var(--kendo-spacing-2)) + 1px) * 2)))",
3937
3980
  "prettyValue": {
3938
3981
  "sm": {
3939
3982
  "padding-x": "var(--kendo-spacing-2)",
3940
3983
  "padding-y": "calc(var(--kendo-spacing-0\\.5) + 1px)",
3941
3984
  "font-size": "var(--kendo-font-size)",
3942
3985
  "line-height": "var(--kendo-line-height)",
3943
- "icon-size": "calc(var(--kendo-icon-size, 1rem) + calc(var(--kendo-input-padding-y, var(--kendo-spacing-1)) + 1px) * 2)",
3986
+ "icon-size": "calc(1rem + calc(var(--kendo-input-padding-y, var(--kendo-spacing-1)) + 1px) * 2)",
3944
3987
  "button-padding-x": "calc(var(--kendo-spacing-0\\.5) + 1px)",
3945
3988
  "button-padding-y": "calc(var(--kendo-spacing-0\\.5) + 1px)",
3946
3989
  "button-width": "calc(var(--kendo-line-height-lg) * 1em + calc(var(--kendo-button-sm-padding-y, var(--kendo-spacing-0\\.5)) + 1px) * 2)"
@@ -3950,7 +3993,7 @@
3950
3993
  "padding-y": "calc(var(--kendo-input-padding-y, var(--kendo-spacing-1)) + 1px)",
3951
3994
  "font-size": "var(--kendo-input-font-size, var(--kendo-font-size))",
3952
3995
  "line-height": "var(--kendo-input-line-height, var(--kendo-line-height))",
3953
- "icon-size": "calc(var(--kendo-icon-size, 1rem) + calc(var(--kendo-spacing-0\\.5) + 1px) * 2)",
3996
+ "icon-size": "calc(1rem + calc(var(--kendo-spacing-0\\.5) + 1px) * 2)",
3954
3997
  "button-padding-x": "calc(var(--kendo-input-padding-y, var(--kendo-spacing-1)) + 1px)",
3955
3998
  "button-padding-y": "calc(var(--kendo-input-padding-y, var(--kendo-spacing-1)) + 1px)",
3956
3999
  "button-width": "calc(var(--kendo-line-height) * 1em + calc(var(--kendo-button-md-padding-y, var(--kendo-spacing-1)) + 1px) * 2)"
@@ -3960,7 +4003,7 @@
3960
4003
  "padding-y": "var(--kendo-spacing-2)",
3961
4004
  "font-size": "var(--kendo-font-size-lg)",
3962
4005
  "line-height": "var(--kendo-line-height-lg)",
3963
- "icon-size": "calc(var(--kendo-icon-size, 1rem) + var(--kendo-spacing-2) * 2)",
4006
+ "icon-size": "calc(1rem + var(--kendo-spacing-2) * 2)",
3964
4007
  "button-padding-x": "var(--kendo-spacing-2)",
3965
4008
  "button-padding-y": "var(--kendo-spacing-2)",
3966
4009
  "button-width": "calc(var(--kendo-line-height-sm) * 1em + calc(var(--kendo-button-lg-padding-y, var(--kendo-spacing-2)) + 1px) * 2)"
@@ -6158,7 +6201,7 @@
6158
6201
  },
6159
6202
  "kendo-menu-item-icon-spacing": {
6160
6203
  "type": "String",
6161
- "value": "var(--kendo-menu-item-icon-spacing, var(--kendo-icon-spacing, 0.5rem))"
6204
+ "value": "var(--kendo-menu-item-icon-spacing, var(--kendo-spacing-2))"
6162
6205
  },
6163
6206
  "kendo-menu-item-selected-font-weight": {
6164
6207
  "type": "String",
@@ -6272,6 +6315,10 @@
6272
6315
  "type": "Null",
6273
6316
  "value": "null"
6274
6317
  },
6318
+ "kendo-menu-expand-arrow-spacing": {
6319
+ "type": "String",
6320
+ "value": "var(--kendo-menu-expand-arrow-spacing, var(--kendo-spacing-2))"
6321
+ },
6275
6322
  "kendo-menu-separator-margin-inline": {
6276
6323
  "type": "String",
6277
6324
  "value": "var(--kendo-menu-separator-margin-inline, var(--kendo-spacing-1))"
@@ -6362,15 +6409,15 @@
6362
6409
  },
6363
6410
  "kendo-menu-popup-sm-item-padding-end": {
6364
6411
  "type": "Calculation",
6365
- "value": "calc(var(--kendo-menu-popup-sm-item-padding-x, var(--kendo-spacing-2)) * 2 + var(--kendo-icon-size, 1rem))"
6412
+ "value": "calc(var(--kendo-menu-popup-sm-item-padding-x, var(--kendo-spacing-2)) * 2 + 1rem)"
6366
6413
  },
6367
6414
  "kendo-menu-popup-md-item-padding-end": {
6368
6415
  "type": "Calculation",
6369
- "value": "calc(var(--kendo-menu-popup-md-item-padding-x, var(--kendo-spacing-2)) * 2 + var(--kendo-icon-size, 1rem))"
6416
+ "value": "calc(var(--kendo-menu-popup-md-item-padding-x, var(--kendo-spacing-2)) * 2 + 1rem)"
6370
6417
  },
6371
6418
  "kendo-menu-popup-lg-item-padding-end": {
6372
6419
  "type": "Calculation",
6373
- "value": "calc(var(--kendo-menu-popup-lg-item-padding-x, var(--kendo-spacing-2)) * 2 + var(--kendo-icon-size, 1rem))"
6420
+ "value": "calc(var(--kendo-menu-popup-lg-item-padding-x, var(--kendo-spacing-2)) * 2 + 1rem)"
6374
6421
  },
6375
6422
  "kendo-menu-popup-sm-item-icon-margin-start": {
6376
6423
  "type": "String",
@@ -6386,15 +6433,15 @@
6386
6433
  },
6387
6434
  "kendo-menu-popup-sm-item-icon-margin-end": {
6388
6435
  "type": "Calculation",
6389
- "value": "calc(-1 * (var(--kendo-icon-size, 1rem) + var(--kendo-menu-popup-sm-item-padding-x, var(--kendo-spacing-2))))"
6436
+ "value": "calc(-1 * (1rem + var(--kendo-menu-popup-sm-item-padding-x, var(--kendo-spacing-2))))"
6390
6437
  },
6391
6438
  "kendo-menu-popup-md-item-icon-margin-end": {
6392
6439
  "type": "Calculation",
6393
- "value": "calc(-1 * (var(--kendo-icon-size, 1rem) + var(--kendo-menu-popup-md-item-padding-x, var(--kendo-spacing-2))))"
6440
+ "value": "calc(-1 * (1rem + var(--kendo-menu-popup-md-item-padding-x, var(--kendo-spacing-2))))"
6394
6441
  },
6395
6442
  "kendo-menu-popup-lg-item-icon-margin-end": {
6396
6443
  "type": "Calculation",
6397
- "value": "calc(-1 * (var(--kendo-icon-size, 1rem) + var(--kendo-menu-popup-lg-item-padding-x, var(--kendo-spacing-2))))"
6444
+ "value": "calc(-1 * (1rem + var(--kendo-menu-popup-lg-item-padding-x, var(--kendo-spacing-2))))"
6398
6445
  },
6399
6446
  "kendo-menu-popup-item-spacing": {
6400
6447
  "type": "String",
@@ -6402,34 +6449,34 @@
6402
6449
  },
6403
6450
  "kendo-menu-group-sizes": {
6404
6451
  "type": "Map",
6405
- "value": "(sm: (font-size: var(--kendo-menu-popup-sm-font-size, var(--kendo-font-size)), line-height: var(--kendo-menu-popup-sm-line-height, var(--kendo-line-height)), item-padding-y: var(--kendo-menu-popup-sm-item-padding-y, var(--kendo-list-sm-item-padding-y, var(--kendo-spacing-1))), item-padding-x: var(--kendo-menu-popup-sm-item-padding-x, var(--kendo-spacing-2)), item-padding-end: calc(var(--kendo-menu-popup-sm-item-padding-x, var(--kendo-spacing-2)) * 2 + var(--kendo-icon-size, 1rem)), item-icon-margin-start: var(--kendo-spacing-0), item-icon-margin-end: calc(-1 * (var(--kendo-icon-size, 1rem) + var(--kendo-menu-popup-sm-item-padding-x, var(--kendo-spacing-2))))), md: (font-size: var(--kendo-menu-popup-md-font-size, var(--kendo-font-size)), line-height: var(--kendo-menu-popup-md-line-height, var(--kendo-line-height)), item-padding-y: var(--kendo-menu-popup-md-item-padding-y, var(--kendo-list-md-item-padding-y, var(--kendo-spacing-1\\.5))), item-padding-x: var(--kendo-menu-popup-md-item-padding-x, var(--kendo-spacing-2)), item-padding-end: calc(var(--kendo-menu-popup-md-item-padding-x, var(--kendo-spacing-2)) * 2 + var(--kendo-icon-size, 1rem)), item-icon-margin-start: var(--kendo-spacing-0), item-icon-margin-end: calc(-1 * (var(--kendo-icon-size, 1rem) + var(--kendo-menu-popup-md-item-padding-x, var(--kendo-spacing-2))))), lg: (font-size: var(--kendo-menu-popup-lg-font-size, var(--kendo-font-size-lg)), line-height: var(--kendo-menu-popup-lg-line-height, var(--kendo-line-height)), item-padding-y: var(--kendo-menu-popup-lg-item-padding-y, var(--kendo-list-lg-item-padding-y, var(--kendo-spacing-2\\.5))), item-padding-x: var(--kendo-menu-popup-lg-item-padding-x, var(--kendo-spacing-2)), item-padding-end: calc(var(--kendo-menu-popup-lg-item-padding-x, var(--kendo-spacing-2)) * 2 + var(--kendo-icon-size, 1rem)), item-icon-margin-start: var(--kendo-spacing-0), item-icon-margin-end: calc(-1 * (var(--kendo-icon-size, 1rem) + var(--kendo-menu-popup-lg-item-padding-x, var(--kendo-spacing-2))))))",
6452
+ "value": "(sm: (font-size: var(--kendo-menu-popup-sm-font-size, var(--kendo-font-size)), line-height: var(--kendo-menu-popup-sm-line-height, var(--kendo-line-height)), item-padding-y: var(--kendo-menu-popup-sm-item-padding-y, var(--kendo-list-sm-item-padding-y, var(--kendo-spacing-1))), item-padding-x: var(--kendo-menu-popup-sm-item-padding-x, var(--kendo-spacing-2)), item-padding-end: calc(var(--kendo-menu-popup-sm-item-padding-x, var(--kendo-spacing-2)) * 2 + 1rem), item-icon-margin-start: var(--kendo-spacing-0), item-icon-margin-end: calc(-1 * (1rem + var(--kendo-menu-popup-sm-item-padding-x, var(--kendo-spacing-2))))), md: (font-size: var(--kendo-menu-popup-md-font-size, var(--kendo-font-size)), line-height: var(--kendo-menu-popup-md-line-height, var(--kendo-line-height)), item-padding-y: var(--kendo-menu-popup-md-item-padding-y, var(--kendo-list-md-item-padding-y, var(--kendo-spacing-1\\.5))), item-padding-x: var(--kendo-menu-popup-md-item-padding-x, var(--kendo-spacing-2)), item-padding-end: calc(var(--kendo-menu-popup-md-item-padding-x, var(--kendo-spacing-2)) * 2 + 1rem), item-icon-margin-start: var(--kendo-spacing-0), item-icon-margin-end: calc(-1 * (1rem + var(--kendo-menu-popup-md-item-padding-x, var(--kendo-spacing-2))))), lg: (font-size: var(--kendo-menu-popup-lg-font-size, var(--kendo-font-size-lg)), line-height: var(--kendo-menu-popup-lg-line-height, var(--kendo-line-height)), item-padding-y: var(--kendo-menu-popup-lg-item-padding-y, var(--kendo-list-lg-item-padding-y, var(--kendo-spacing-2\\.5))), item-padding-x: var(--kendo-menu-popup-lg-item-padding-x, var(--kendo-spacing-2)), item-padding-end: calc(var(--kendo-menu-popup-lg-item-padding-x, var(--kendo-spacing-2)) * 2 + 1rem), item-icon-margin-start: var(--kendo-spacing-0), item-icon-margin-end: calc(-1 * (1rem + var(--kendo-menu-popup-lg-item-padding-x, var(--kendo-spacing-2))))))",
6406
6453
  "prettyValue": {
6407
6454
  "sm": {
6408
6455
  "font-size": "var(--kendo-menu-popup-sm-font-size, var(--kendo-font-size))",
6409
6456
  "line-height": "var(--kendo-menu-popup-sm-line-height, var(--kendo-line-height))",
6410
6457
  "item-padding-y": "var(--kendo-menu-popup-sm-item-padding-y, var(--kendo-list-sm-item-padding-y, var(--kendo-spacing-1)))",
6411
6458
  "item-padding-x": "var(--kendo-menu-popup-sm-item-padding-x, var(--kendo-spacing-2))",
6412
- "item-padding-end": "calc(var(--kendo-menu-popup-sm-item-padding-x, var(--kendo-spacing-2)) * 2 + var(--kendo-icon-size, 1rem))",
6459
+ "item-padding-end": "calc(var(--kendo-menu-popup-sm-item-padding-x, var(--kendo-spacing-2)) * 2 + 1rem)",
6413
6460
  "item-icon-margin-start": "var(--kendo-spacing-0)",
6414
- "item-icon-margin-end": "calc(-1 * (var(--kendo-icon-size, 1rem) + var(--kendo-menu-popup-sm-item-padding-x, var(--kendo-spacing-2))))"
6461
+ "item-icon-margin-end": "calc(-1 * (1rem + var(--kendo-menu-popup-sm-item-padding-x, var(--kendo-spacing-2))))"
6415
6462
  },
6416
6463
  "md": {
6417
6464
  "font-size": "var(--kendo-menu-popup-md-font-size, var(--kendo-font-size))",
6418
6465
  "line-height": "var(--kendo-menu-popup-md-line-height, var(--kendo-line-height))",
6419
6466
  "item-padding-y": "var(--kendo-menu-popup-md-item-padding-y, var(--kendo-list-md-item-padding-y, var(--kendo-spacing-1\\.5)))",
6420
6467
  "item-padding-x": "var(--kendo-menu-popup-md-item-padding-x, var(--kendo-spacing-2))",
6421
- "item-padding-end": "calc(var(--kendo-menu-popup-md-item-padding-x, var(--kendo-spacing-2)) * 2 + var(--kendo-icon-size, 1rem))",
6468
+ "item-padding-end": "calc(var(--kendo-menu-popup-md-item-padding-x, var(--kendo-spacing-2)) * 2 + 1rem)",
6422
6469
  "item-icon-margin-start": "var(--kendo-spacing-0)",
6423
- "item-icon-margin-end": "calc(-1 * (var(--kendo-icon-size, 1rem) + var(--kendo-menu-popup-md-item-padding-x, var(--kendo-spacing-2))))"
6470
+ "item-icon-margin-end": "calc(-1 * (1rem + var(--kendo-menu-popup-md-item-padding-x, var(--kendo-spacing-2))))"
6424
6471
  },
6425
6472
  "lg": {
6426
6473
  "font-size": "var(--kendo-menu-popup-lg-font-size, var(--kendo-font-size-lg))",
6427
6474
  "line-height": "var(--kendo-menu-popup-lg-line-height, var(--kendo-line-height))",
6428
6475
  "item-padding-y": "var(--kendo-menu-popup-lg-item-padding-y, var(--kendo-list-lg-item-padding-y, var(--kendo-spacing-2\\.5)))",
6429
6476
  "item-padding-x": "var(--kendo-menu-popup-lg-item-padding-x, var(--kendo-spacing-2))",
6430
- "item-padding-end": "calc(var(--kendo-menu-popup-lg-item-padding-x, var(--kendo-spacing-2)) * 2 + var(--kendo-icon-size, 1rem))",
6477
+ "item-padding-end": "calc(var(--kendo-menu-popup-lg-item-padding-x, var(--kendo-spacing-2)) * 2 + 1rem)",
6431
6478
  "item-icon-margin-start": "var(--kendo-spacing-0)",
6432
- "item-icon-margin-end": "calc(-1 * (var(--kendo-icon-size, 1rem) + var(--kendo-menu-popup-lg-item-padding-x, var(--kendo-spacing-2))))"
6479
+ "item-icon-margin-end": "calc(-1 * (1rem + var(--kendo-menu-popup-lg-item-padding-x, var(--kendo-spacing-2))))"
6433
6480
  }
6434
6481
  }
6435
6482
  },
@@ -6535,7 +6582,7 @@
6535
6582
  },
6536
6583
  "kendo-menu-popup-item-icon-md-margin-end": {
6537
6584
  "type": "Calculation",
6538
- "value": "calc(-1 * (var(--kendo-icon-size, 1rem) + var(--kendo-menu-popup-md-item-padding-x, var(--kendo-spacing-2))))"
6585
+ "value": "calc(-1 * (1rem + var(--kendo-menu-popup-md-item-padding-x, var(--kendo-spacing-2))))"
6539
6586
  },
6540
6587
  "kendo-menu-popup-item-focus-outline": {
6541
6588
  "type": "String",
@@ -6637,6 +6684,10 @@
6637
6684
  "type": "String",
6638
6685
  "value": "var(--kendo-toolbar-lg-spacing, var(--kendo-spacing-3))"
6639
6686
  },
6687
+ "kendo-toolbar-item-icon-spacing": {
6688
+ "type": "String",
6689
+ "value": "var(--kendo-toolbar-item-icon-spacing, var(--kendo-spacing-2))"
6690
+ },
6640
6691
  "kendo-toolbar-separator-height": {
6641
6692
  "type": "Null",
6642
6693
  "value": "null"
@@ -8463,6 +8514,10 @@
8463
8514
  "type": "String",
8464
8515
  "value": "var(--kendo-treeview-gap, var(--kendo-spacing-0\\.5))"
8465
8516
  },
8517
+ "kendo-treeview-item-icon-spacing": {
8518
+ "type": "String",
8519
+ "value": "var(--kendo-treeview-item-icon-spacing, var(--kendo-spacing-2))"
8520
+ },
8466
8521
  "kendo-treeview-border-radius": {
8467
8522
  "type": "String",
8468
8523
  "value": "var(--kendo-treeview-border-radius, var(--kendo-border-radius-md))"
@@ -9396,7 +9451,7 @@
9396
9451
  },
9397
9452
  "kendo-upload-icon-spacing": {
9398
9453
  "type": "String",
9399
- "value": "var(--kendo-upload-icon-spacing, var(--kendo-icon-spacing, 0.5rem))"
9454
+ "value": "var(--kendo-upload-icon-spacing, var(--kendo-spacing-2))"
9400
9455
  },
9401
9456
  "kendo-upload-icon-color": {
9402
9457
  "type": "String",
@@ -10675,7 +10730,7 @@
10675
10730
  },
10676
10731
  "kendo-drawer-mini-initial-width": {
10677
10732
  "type": "Calculation",
10678
- "value": "calc(2 * var(--kendo-drawer-item-padding-x, var(--kendo-spacing-4)) + 2 * var(--kendo-drawer-items-padding-x, var(--kendo-spacing-2\\.5)) + var(--kendo-icon-size, 1rem))"
10733
+ "value": "calc(2 * var(--kendo-drawer-item-padding-x, var(--kendo-spacing-4)) + 2 * var(--kendo-drawer-items-padding-x, var(--kendo-spacing-2\\.5)) + 1rem)"
10679
10734
  },
10680
10735
  "kendo-drawer-hover-bg": {
10681
10736
  "type": "Null",
@@ -11090,7 +11145,7 @@
11090
11145
  },
11091
11146
  "kendo-bottom-nav-item-min-height": {
11092
11147
  "type": "String",
11093
- "value": "var(--kendo-bottom-nav-item-min-height, calc(var(--kendo-icon-size, 1.5rem) * 2 + var(--kendo-bottom-nav-item-padding-y, var(--kendo-spacing-0\\.5)) * 2))"
11148
+ "value": "var(--kendo-bottom-nav-item-min-height, calc(var(--kendo-icon-size-xl, calc(var(--kendo-icon-size, 1rem) * 1.5)) * 2 + var(--kendo-bottom-nav-item-padding-y, var(--kendo-spacing-0\\.5)) * 2))"
11094
11149
  },
11095
11150
  "kendo-bottom-nav-item-border-radius": {
11096
11151
  "type": "String",
@@ -11626,6 +11681,10 @@
11626
11681
  "type": "String",
11627
11682
  "value": "var(--kendo-stepper-label-border-radius, var(--kendo-border-radius-xxl))"
11628
11683
  },
11684
+ "kendo-stepper-label-icon-spacing": {
11685
+ "type": "String",
11686
+ "value": "var(--kendo-stepper-label-icon-spacing, var(--kendo-spacing-2))"
11687
+ },
11629
11688
  "kendo-stepper-border-width": {
11630
11689
  "type": "String",
11631
11690
  "value": "var(--kendo-stepper-border-width, 0px)"
@@ -11966,6 +12025,10 @@
11966
12025
  "type": "String",
11967
12026
  "value": "var(--kendo-tabstrip-item-gap, var(--kendo-spacing-2))"
11968
12027
  },
12028
+ "kendo-tabstrip-item-icon-spacing": {
12029
+ "type": "String",
12030
+ "value": "var(--kendo-tabstrip-item-icon-spacing, var(--kendo-spacing-2))"
12031
+ },
11969
12032
  "kendo-tabstrip-item-spacing-x": {
11970
12033
  "type": "String",
11971
12034
  "value": "var(--kendo-tabstrip-item-spacing-x, var(--kendo-spacing-1))"
@@ -12422,6 +12485,10 @@
12422
12485
  "type": "String",
12423
12486
  "value": "var(--kendo-panelbar-item-padding-y, var(--kendo-spacing-2\\.5))"
12424
12487
  },
12488
+ "kendo-panelbar-item-icon-spacing": {
12489
+ "type": "String",
12490
+ "value": "var(--kendo-panelbar-item-icon-spacing, var(--kendo-spacing-2))"
12491
+ },
12425
12492
  "kendo-panelbar-item-level-count": {
12426
12493
  "type": "Number",
12427
12494
  "value": "4"
@@ -12708,7 +12775,7 @@
12708
12775
  },
12709
12776
  "kendo-panelbar-header-padding-x-start": {
12710
12777
  "type": "String",
12711
- "value": "var(--kendo-panelbar-header-padding-x-start, calc(var(--kendo-panelbar-icon-spacing, var(--kendo-spacing-2\\.5)) * 2 + var(--kendo-icon-size, 1rem)))"
12778
+ "value": "var(--kendo-panelbar-header-padding-x-start, calc(var(--kendo-panelbar-icon-spacing, var(--kendo-spacing-2\\.5)) * 2 + 1rem))"
12712
12779
  },
12713
12780
  "kendo-panelbar-header-padding-x-end": {
12714
12781
  "type": "String",
@@ -12716,7 +12783,7 @@
12716
12783
  },
12717
12784
  "kendo-panelbar-item-padding-x-start": {
12718
12785
  "type": "Calculation",
12719
- "value": "calc(var(--kendo-panelbar-icon-spacing, var(--kendo-spacing-2\\.5)) * 2 + var(--kendo-icon-size, 1rem))"
12786
+ "value": "calc(var(--kendo-panelbar-icon-spacing, var(--kendo-spacing-2\\.5)) * 2 + 1rem)"
12720
12787
  },
12721
12788
  "kendo-panelbar-item-padding-x-end": {
12722
12789
  "type": "String",
@@ -13260,7 +13327,11 @@
13260
13327
  },
13261
13328
  "kendo-grid-header-menu-icon-spacing": {
13262
13329
  "type": "String",
13263
- "value": "var(--kendo-grid-header-menu-spacing, var(--kendo-icon-spacing, 0.5rem))"
13330
+ "value": "var(--kendo-grid-header-menu-spacing, var(--kendo-spacing-2))"
13331
+ },
13332
+ "kendo-grid-column-menu-icon-spacing": {
13333
+ "type": "String",
13334
+ "value": "var(--kendo-grid-column-menu-icon-spacing, var(--kendo-spacing-2))"
13264
13335
  },
13265
13336
  "kendo-grid-toolbar-border-width": {
13266
13337
  "type": "String",
@@ -13400,7 +13471,7 @@
13400
13471
  },
13401
13472
  "kendo-grid-sorted-icon-spacing": {
13402
13473
  "type": "String",
13403
- "value": "var(--kendo-grid-sort-icon-spacing, var(--kendo-icon-lg-spacing, 0.5rem))"
13474
+ "value": "var(--kendo-grid-sort-icon-spacing, var(--kendo-spacing-2))"
13404
13475
  },
13405
13476
  "kendo-grid-sorted-bg": {
13406
13477
  "type": "String",
@@ -13568,11 +13639,11 @@
13568
13639
  },
13569
13640
  "kendo-grid-drag-cell-width": {
13570
13641
  "type": "String",
13571
- "value": "var(--kendo-grid-drag-cell-width, calc(var(--kendo-icon-size, 1rem) * 2.25))"
13642
+ "value": "var(--kendo-grid-drag-cell-width, calc(1rem * 2.25))"
13572
13643
  },
13573
13644
  "kendo-grid-hierarchy-col-width": {
13574
13645
  "type": "String",
13575
- "value": "var(--kendo-grid-hierarchy-col-width, calc(var(--kendo-icon-size, 1rem) * 2))"
13646
+ "value": "var(--kendo-grid-hierarchy-col-width, calc(1rem * 2))"
13576
13647
  },
13577
13648
  "kendo-grid-grouping-row-border-top": {
13578
13649
  "type": "String",
@@ -13672,7 +13743,7 @@
13672
13743
  },
13673
13744
  "kendo-grid-header-menu-spacing": {
13674
13745
  "type": "String",
13675
- "value": "var(--kendo-grid-header-menu-spacing, var(--kendo-icon-spacing, 0.5rem))"
13746
+ "value": "var(--kendo-grid-header-menu-spacing, var(--kendo-spacing-2))"
13676
13747
  },
13677
13748
  "kendo-grid-header-first-border-width": {
13678
13749
  "type": "String",
@@ -13704,7 +13775,7 @@
13704
13775
  },
13705
13776
  "kendo-grid-sort-icon-spacing": {
13706
13777
  "type": "String",
13707
- "value": "var(--kendo-grid-sort-icon-spacing, var(--kendo-icon-lg-spacing, 0.5rem))"
13778
+ "value": "var(--kendo-grid-sort-icon-spacing, var(--kendo-spacing-2))"
13708
13779
  },
13709
13780
  "kendo-grid-sort-indicator-text": {
13710
13781
  "type": "String",
@@ -14232,7 +14303,7 @@
14232
14303
  },
14233
14304
  "kendo-filter-menu-padding-left": {
14234
14305
  "type": "String",
14235
- "value": "var(--kendo-filter-menu-padding-left, calc(var(--kendo-icon-size, 1rem) + 2 * var(--kendo-spacing-1)))"
14306
+ "value": "var(--kendo-filter-menu-padding-left, calc(1rem + 2 * var(--kendo-spacing-1)))"
14236
14307
  },
14237
14308
  "kendo-spreadsheet-insert-image-dialog-img": {
14238
14309
  "type": "String",
@@ -14806,6 +14877,10 @@
14806
14877
  "type": "String",
14807
14878
  "value": "var(--kendo-file-manager-preview-column-gap, var(--kendo-spacing-1))"
14808
14879
  },
14880
+ "kendo-file-manager-icon-spacing": {
14881
+ "type": "String",
14882
+ "value": "var(--kendo-file-manager-icon-spacing, var(--kendo-spacing-2))"
14883
+ },
14809
14884
  "kendo-file-manager-preview-bg": {
14810
14885
  "type": "String",
14811
14886
  "value": "var(--kendo-file-manager-preview-bg, transparent)"
@@ -16086,6 +16161,10 @@
16086
16161
  "type": "Null",
16087
16162
  "value": "null"
16088
16163
  },
16164
+ "kendo-scheduler-nav-item-icon-spacing": {
16165
+ "type": "String",
16166
+ "value": "var(--kendo-scheduler-nav-item-icon-spacing, var(--kendo-spacing-2))"
16167
+ },
16089
16168
  "kendo-scheduler-header-bg": {
16090
16169
  "type": "Null",
16091
16170
  "value": "null"
@@ -17060,7 +17139,7 @@
17060
17139
  },
17061
17140
  "kendo-pdf-viewer-search-panel-matches-spacing": {
17062
17141
  "type": "String",
17063
- "value": "var(--kendo-pdf-viewer-search-panel-matches-spacing, var(--kendo-icon-spacing, 0.5rem))"
17142
+ "value": "var(--kendo-pdf-viewer-search-panel-matches-spacing, var(--kendo-spacing-2))"
17064
17143
  },
17065
17144
  "kendo-pdf-viewer-selection-line-height": {
17066
17145
  "type": "String",
@@ -17940,7 +18019,7 @@
17940
18019
  },
17941
18020
  "kendo-map-navigator-width": {
17942
18021
  "type": "String",
17943
- "value": "var(--kendo-map-navigator-width, calc(var(--kendo-icon-size, 1rem) * 3 + var(--kendo-map-navigator-padding, var(--kendo-spacing-0\\.5)) * 2))"
18022
+ "value": "var(--kendo-map-navigator-width, calc(1rem * 3 + var(--kendo-map-navigator-padding, var(--kendo-spacing-0\\.5)) * 2))"
17944
18023
  },
17945
18024
  "kendo-map-navigator-border-width": {
17946
18025
  "type": "String",
@@ -3,7 +3,7 @@
3
3
  "name": "All",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-fluent",
6
- "version": "14.4.0-dev.3",
6
+ "version": "14.4.0-dev.4",
7
7
  "api": "modern",
8
8
  "previewColors": [
9
9
  "oklch(100.00% 0.0001 0deg)",
@@ -3,7 +3,7 @@
3
3
  "name": "Fluent 1 Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-fluent",
6
- "version": "14.4.0-dev.3",
6
+ "version": "14.4.0-dev.4",
7
7
  "previewColors": [
8
8
  "oklch(21.85% 0.0025 67.57deg)",
9
9
  "oklch(24.42% 0.0024 67.57deg)",
@@ -3,7 +3,7 @@
3
3
  "name": "Fluent 1",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-fluent",
6
- "version": "14.4.0-dev.3",
6
+ "version": "14.4.0-dev.4",
7
7
  "previewColors": [
8
8
  "oklch(100.00% 0.0001 0deg)",
9
9
  "oklch(98.26% 0.0016 66.88deg)",
@@ -3,7 +3,7 @@
3
3
  "name": "Fluent Main Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-fluent",
6
- "version": "14.4.0-dev.3",
6
+ "version": "14.4.0-dev.4",
7
7
  "previewColors": [
8
8
  "oklch(23.93% 0.0000 0deg)",
9
9
  "oklch(28.09% 0.0000 0deg)",
@@ -3,7 +3,7 @@
3
3
  "name": "Fluent Main",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-fluent",
6
- "version": "14.4.0-dev.3",
6
+ "version": "14.4.0-dev.4",
7
7
  "previewColors": [
8
8
  "oklch(98.51% 0.0001 0deg)",
9
9
  "oklch(100.00% 0.0001 0deg)",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progress/kendo-theme-fluent",
3
3
  "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
4
- "version": "14.4.0-dev.3",
4
+ "version": "14.4.0-dev.4",
5
5
  "author": "Progress",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
@@ -53,9 +53,9 @@
53
53
  "postpublish": "echo 'no postpublish for the Fluent theme'"
54
54
  },
55
55
  "dependencies": {
56
- "@progress/kendo-svg-icons": "^4.9.0",
57
- "@progress/kendo-theme-core": "14.4.0-dev.3",
58
- "@progress/kendo-theme-utils": "14.4.0-dev.3"
56
+ "@progress/kendo-svg-icons": "^4.11.0",
57
+ "@progress/kendo-theme-core": "14.4.0-dev.4",
58
+ "@progress/kendo-theme-utils": "14.4.0-dev.4"
59
59
  },
60
60
  "directories": {
61
61
  "doc": "docs",
@@ -1,5 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "../core/_index.scss" as *;
3
+ @use "../icons/_variables.scss" as *;
3
4
 
4
5
  /// The default theme color of the BottomNavigation.
5
6
  /// @group bottom-navigation
@@ -49,7 +50,7 @@ $kendo-bottom-nav-item-min-width: var( --kendo-bottom-nav-item-min-width, 72px )
49
50
  $kendo-bottom-nav-item-max-width: var( --kendo-bottom-nav-item-max-width, none ) !default;
50
51
  /// The minimum height of the BottomNavigation item.
51
52
  /// @group bottom-navigation
52
- $kendo-bottom-nav-item-min-height: var( --kendo-bottom-nav-item-min-height, calc( var( --kendo-icon-size, 1.5rem ) * 2 + (#{$kendo-bottom-nav-item-padding-y} * 2) ) ) !default;
53
+ $kendo-bottom-nav-item-min-height: var( --kendo-bottom-nav-item-min-height, calc( #{$ki-icon-size-xl} * 2 + (#{$kendo-bottom-nav-item-padding-y} * 2) ) ) !default;
53
54
  /// The border radius of the BottomNavigation item.
54
55
  /// @group bottom-navigation
55
56
  $kendo-bottom-nav-item-border-radius: var( --kendo-bottom-nav-item-border-radius, k-border-radius(md) ) !default;
@@ -3,6 +3,7 @@
3
3
  @use "../core/_index.scss" as *;
4
4
  @use "../core/z-index/index.scss" as *;
5
5
  @use "../core/functions/index.scss" as *;
6
+ @use "../icons/_variables.scss" as *;
6
7
  @use "./_variables.scss" as *;
7
8
  @use "@progress/kendo-theme-core/scss/components/button/_layout.scss" as *;
8
9
 
@@ -53,38 +54,38 @@
53
54
 
54
55
  &.k-svg-icon > svg,
55
56
  &.k-icon-md > svg {
56
- width: var( --kendo-icon-size-md, 1rem );
57
- height: var( --kendo-icon-size-md, 1rem );
57
+ width: var(--kendo-icon-size-md, #{$ki-icon-size-md});
58
+ height: var(--kendo-icon-size-md, #{$ki-icon-size-md});
58
59
  }
59
60
 
60
61
  &.k-icon-xs > svg {
61
- width: var( --kendo-icon-size-sm, 0.75rem );
62
- height: var( --kendo-icon-size-sm, 0.75rem )s;
62
+ width: var(--kendo-icon-size-xs, #{$ki-icon-size-xs});
63
+ height: var(--kendo-icon-size-xs, #{$ki-icon-size-xs});
63
64
  }
64
65
 
65
66
  &.k-icon-sm > svg {
66
- width: var( --kendo-icon-size-sm, 0.875rem );
67
- height: var( --kendo-icon-size-sm, 0.875rem );
67
+ width: var(--kendo-icon-size-sm, #{$ki-icon-size-sm});
68
+ height: var(--kendo-icon-size-sm, #{$ki-icon-size-sm});
68
69
  }
69
70
 
70
71
  &.k-icon-lg > svg {
71
- width: var( --kendo-icon-size-lg, 1.25rem );
72
- height: var( --kendo-icon-size-lg, 1.25rem );
72
+ width: var(--kendo-icon-size-lg, #{$ki-icon-size-lg});
73
+ height: var(--kendo-icon-size-lg, #{$ki-icon-size-lg});
73
74
  }
74
75
 
75
76
  &.k-icon-xl > svg {
76
- width: var( --kendo-icon-size-xl, 1.5rem );
77
- height: var( --kendo-icon-size-xl, 1.5rem );
77
+ width: var(--kendo-icon-size-xl, #{$ki-icon-size-xl});
78
+ height: var(--kendo-icon-size-xl, #{$ki-icon-size-xl});
78
79
  }
79
80
 
80
81
  &.k-icon-xxl > svg {
81
- width: var( --kendo-icon-size-xxl, 2rem );
82
- height: var( --kendo-icon-size-xxl, 2rem );
82
+ width: var(--kendo-icon-size-xxl, #{$ki-icon-size-xxl});
83
+ height: var(--kendo-icon-size-xxl, #{$ki-icon-size-xxl});
83
84
  }
84
85
 
85
86
  &.k-icon-xxxl > svg {
86
- width: var( --kendo-icon-size-xxl, 3rem );
87
- height: var( --kendo-icon-size-xxl, 3rem );
87
+ width: var(--kendo-icon-size-xxl, #{$ki-icon-size-xxl});
88
+ height: var(--kendo-icon-size-xxl, #{$ki-icon-size-xxl});
88
89
  }
89
90
  }
90
91
  }
@@ -9,7 +9,7 @@
9
9
  .k-icon-color-preview {
10
10
 
11
11
  .k-color-preview-mask {
12
- width: $kendo-icon-size;
12
+ width: $ki-icon-size;
13
13
  height: 3px;
14
14
  }
15
15
  }