@progress/kendo-theme-fluent 10.1.0-dev.5 → 10.1.0-dev.6

package/dist/meta/variables.json

@@ -5347,6 +5347,22 @@
         "type": "String",
         "value": "color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)"
     },
+    "kendo-input-calc-size": {
+        "type": "Calculation",
+        "value": "calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\\.5, 0.375rem) * 2 + (2px))"
+    },
+    "kendo-input-sm-calc-size": {
+        "type": "Calculation",
+        "value": "calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + (2px))"
+    },
+    "kendo-input-md-calc-size": {
+        "type": "Calculation",
+        "value": "calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\\.5, 0.375rem) * 2 + (2px))"
+    },
+    "kendo-input-lg-calc-size": {
+        "type": "Calculation",
+        "value": "calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + (2px))"
+    },
     "kendo-input-sizes": {
         "type": "Map",
         "value": "(sm: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-1, 0.25rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), icon-size: calc(var(--kendo-icon-size, 1rem) + var(--kendo-spacing-1\\.5, 0.375rem) * 2), button-padding-x: var(--kendo-spacing-1, 0.25rem), button-padding-y: var(--kendo-spacing-1, 0.25rem), button-width: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2)), md: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-1\\.5, 0.375rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), icon-size: calc(var(--kendo-icon-size, 1rem) + var(--kendo-spacing-1, 0.25rem) * 2), button-padding-x: var(--kendo-spacing-1\\.5, 0.375rem), button-padding-y: var(--kendo-spacing-1\\.5, 0.375rem), button-width: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\\.5, 0.375rem) * 2)), lg: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-2, 0.5rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), icon-size: calc(var(--kendo-icon-size, 1rem) + var(--kendo-spacing-2, 0.5rem) * 2), button-padding-x: var(--kendo-spacing-2, 0.5rem), button-padding-y: var(--kendo-spacing-2, 0.5rem), button-width: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2)))",
@@ -5812,31 +5828,31 @@
     },
     "kendo-checkbox-hover-image": {
         "type": "String",
-        "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='var%28--kendo-color-on-app-surface, %23323130%29' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e\")"
+        "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23323130' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e\")"
     },
     "kendo-checkbox-checked-image": {
         "type": "String",
-        "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='var%28--kendo-color-app-surface, %23ffffff%29' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e\")"
+        "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e\")"
     },
     "kendo-checkbox-indeterminate-image": {
         "type": "String",
-        "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3crect x='3' y='3' width='10' height='10' rx='2' fill='var%28--kendo-color-primary, %230078d4%29'/%3e%3c/svg%3e\")"
+        "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3crect x='3' y='3' width='10' height='10' rx='2' fill='%230078d4'/%3e%3c/svg%3e\")"
     },
     "kendo-checkbox-hover-checked-image": {
         "type": "String",
-        "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='var%28--kendo-color-app-surface, %23ffffff%29' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e\")"
+        "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e\")"
     },
     "kendo-checkbox-hover-indeterminate-image": {
         "type": "String",
-        "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3crect x='3' y='3' width='10' height='10' rx='2' fill='var%28--kendo-color-primary-hover, %23106ebe%29'/%3e%3c/svg%3e\")"
+        "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3crect x='3' y='3' width='10' height='10' rx='2' fill='%23106ebe'/%3e%3c/svg%3e\")"
     },
     "kendo-checkbox-disabled-checked-image": {
         "type": "String",
-        "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='var%28--kendo-color-app-surface, %23ffffff%29' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e\")"
+        "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e\")"
     },
     "kendo-checkbox-disabled-indeterminate-image": {
         "type": "String",
-        "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3crect x='3' y='3' width='10' height='10' rx='2' fill='color-mix%28in srgb, var%28--kendo-color-on-app-surface, %23323130%29 28%25, transparent%29'/%3e%3c/svg%3e\")"
+        "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3crect x='3' y='3' width='10' height='10' rx='2' fill='%23323130'/%3e%3c/svg%3e\")"
     },
     "kendo-checkbox-label-margin-x": {
         "type": "String",
@@ -6200,7 +6216,7 @@
     },
     "kendo-radio-checked-image": {
         "type": "String",
-        "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='var%28--kendo-color-primary, %230078d4%29'/%3e%3c/svg%3e\")"
+        "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='%230078d4'/%3e%3c/svg%3e\")"
     },
     "kendo-radio-disabled-checked-image": {
         "type": "Null",
@@ -7295,6 +7311,18 @@
         "type": "String",
         "value": "var(--kendo-spacing-2, 0.5rem)"
     },
+    "kendo-toolbar-sm-separator-height": {
+        "type": "Calculation",
+        "value": "calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)"
+    },
+    "kendo-toolbar-md-separator-height": {
+        "type": "Calculation",
+        "value": "calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\\.5, 0.375rem) * 2 + 1px * 2)"
+    },
+    "kendo-toolbar-lg-separator-height": {
+        "type": "Calculation",
+        "value": "calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 1px * 2)"
+    },
     "kendo-toolbar-border-width": {
         "type": "Number",
         "value": "1px"
@@ -7323,6 +7351,10 @@
         "type": "String",
         "value": "var(--kendo-component-border, initial)"
     },
+    "kendo-toolbar-scroll-overlay": {
+        "type": "List",
+        "value": "(var(--kendo-color-surface, #faf9f8), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))"
+    },
     "kendo-toolbar-outline-text": {
         "type": "Null",
         "value": "null"
@@ -7335,6 +7367,10 @@
         "type": "Number",
         "value": "1px"
     },
+    "kendo-toolbar-outline-scroll-overlay": {
+        "type": "List",
+        "value": "(var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))"
+    },
     "kendo-toolbar-flat-text": {
         "type": "Null",
         "value": "null"
@@ -7347,6 +7383,10 @@
         "type": "Number",
         "value": "1px"
     },
+    "kendo-toolbar-flat-scroll-overlay": {
+        "type": "List",
+        "value": "(var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))"
+    },
     "kendo-toolbar-separator-border": {
         "type": "String",
         "value": "inherit"
@@ -7369,22 +7409,25 @@
     },
     "kendo-toolbar-sizes": {
         "type": "Map",
-        "value": "(sm: (padding-x: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1, 0.25rem), spacing: var(--kendo-spacing-2, 0.5rem)), md: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-2, 0.5rem), spacing: var(--kendo-spacing-2, 0.5rem)), lg: (padding-x: var(--kendo-spacing-2\\.5, 0.625rem), padding-y: var(--kendo-spacing-2\\.5, 0.625rem), spacing: var(--kendo-spacing-2, 0.5rem)))",
+        "value": "(sm: (padding-x: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1, 0.25rem), spacing: var(--kendo-spacing-2, 0.5rem), separator-height: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)), md: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-2, 0.5rem), spacing: var(--kendo-spacing-2, 0.5rem), separator-height: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\\.5, 0.375rem) * 2 + 1px * 2)), lg: (padding-x: var(--kendo-spacing-2\\.5, 0.625rem), padding-y: var(--kendo-spacing-2\\.5, 0.625rem), spacing: var(--kendo-spacing-2, 0.5rem), separator-height: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 1px * 2)))",
         "prettyValue": {
             "sm": {
                 "padding-x": "var(--kendo-spacing-1, 0.25rem)",
                 "padding-y": "var(--kendo-spacing-1, 0.25rem)",
-                "spacing": "var(--kendo-spacing-2, 0.5rem)"
+                "spacing": "var(--kendo-spacing-2, 0.5rem)",
+                "separator-height": "calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)"
             },
             "md": {
                 "padding-x": "var(--kendo-spacing-2, 0.5rem)",
                 "padding-y": "var(--kendo-spacing-2, 0.5rem)",
-                "spacing": "var(--kendo-spacing-2, 0.5rem)"
+                "spacing": "var(--kendo-spacing-2, 0.5rem)",
+                "separator-height": "calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\\.5, 0.375rem) * 2 + 1px * 2)"
             },
             "lg": {
                 "padding-x": "var(--kendo-spacing-2\\.5, 0.625rem)",
                 "padding-y": "var(--kendo-spacing-2\\.5, 0.625rem)",
-                "spacing": "var(--kendo-spacing-2, 0.5rem)"
+                "spacing": "var(--kendo-spacing-2, 0.5rem)",
+                "separator-height": "calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 1px * 2)"
             }
         }
     },
@@ -12168,6 +12211,30 @@
         "type": "Number",
         "value": "0px"
     },
+    "kendo-tabstrip-sm-font-size": {
+        "type": "String",
+        "value": "var(--kendo-font-size, inherit)"
+    },
+    "kendo-tabstrip-sm-line-height": {
+        "type": "String",
+        "value": "var(--kendo-line-height, normal)"
+    },
+    "kendo-tabstrip-md-font-size": {
+        "type": "String",
+        "value": "var(--kendo-font-size, inherit)"
+    },
+    "kendo-tabstrip-md-line-height": {
+        "type": "String",
+        "value": "var(--kendo-line-height, normal)"
+    },
+    "kendo-tabstrip-lg-font-size": {
+        "type": "String",
+        "value": "var(--kendo-font-size, inherit)"
+    },
+    "kendo-tabstrip-lg-line-height": {
+        "type": "String",
+        "value": "var(--kendo-line-height, normal)"
+    },
     "kendo-tabstrip-bg": {
         "type": "Color",
         "value": "transparent"
@@ -12185,8 +12252,8 @@
         "value": "var(--kendo-spacing-2, 0.5rem)"
     },
     "kendo-tabstrip-item-padding-y": {
-        "type": "Calculation",
-        "value": "calc(var(--kendo-spacing-2, 0.5rem) + var(--kendo-spacing-1, 0.25rem))"
+        "type": "String",
+        "value": "var(--kendo-spacing-3, 0.75rem)"
     },
     "kendo-tabstrip-item-border-width": {
         "type": "Number",
@@ -12200,6 +12267,30 @@
         "type": "String",
         "value": "var(--kendo-spacing-2, 0.5rem)"
     },
+    "kendo-tabstrip-sm-item-padding-x": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2, 0.5rem)"
+    },
+    "kendo-tabstrip-sm-item-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2\\.5, 0.625rem)"
+    },
+    "kendo-tabstrip-md-item-padding-x": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2, 0.5rem)"
+    },
+    "kendo-tabstrip-md-item-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-spacing-3, 0.75rem)"
+    },
+    "kendo-tabstrip-lg-item-padding-x": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2, 0.5rem)"
+    },
+    "kendo-tabstrip-lg-item-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-spacing-3\\.5, 0.875rem)"
+    },
     "kendo-tabstrip-item-bg": {
         "type": "Color",
         "value": "transparent"
@@ -12312,6 +12403,34 @@
         "type": "String",
         "value": "var(--kendo-spacing-1, 0.25rem)"
     },
+    "kendo-tabstrip-scroll-overlay": {
+        "type": "List",
+        "value": "(var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))"
+    },
+    "kendo-tabstrip-sizes": {
+        "type": "Map",
+        "value": "(sm: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-2\\.5, 0.625rem)), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-3, 0.75rem)), lg: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-3\\.5, 0.875rem)))",
+        "prettyValue": {
+            "sm": {
+                "font-size": "var(--kendo-font-size, inherit)",
+                "line-height": "var(--kendo-line-height, normal)",
+                "item-padding-x": "var(--kendo-spacing-2, 0.5rem)",
+                "item-padding-y": "var(--kendo-spacing-2\\.5, 0.625rem)"
+            },
+            "md": {
+                "font-size": "var(--kendo-font-size, inherit)",
+                "line-height": "var(--kendo-line-height, normal)",
+                "item-padding-x": "var(--kendo-spacing-2, 0.5rem)",
+                "item-padding-y": "var(--kendo-spacing-3, 0.75rem)"
+            },
+            "lg": {
+                "font-size": "var(--kendo-font-size, inherit)",
+                "line-height": "var(--kendo-line-height, normal)",
+                "item-padding-x": "var(--kendo-spacing-2, 0.5rem)",
+                "item-padding-y": "var(--kendo-spacing-3\\.5, 0.875rem)"
+            }
+        }
+    },
     "kendo-wizard-border-width": {
         "type": "Number",
         "value": "0px"
@@ -17896,5 +18015,74 @@
     "kendo-signature-lg-min-height": {
         "type": "Number",
         "value": "110px"
+    },
+    "kendo-otp-gap": {
+        "type": "String",
+        "value": "var(--kendo-spacing-1\\.5, 0.375rem)"
+    },
+    "kendo-otp-sm-gap": {
+        "type": "String",
+        "value": "var(--kendo-spacing-1, 0.25rem)"
+    },
+    "kendo-otp-md-gap": {
+        "type": "String",
+        "value": "var(--kendo-spacing-1\\.5, 0.375rem)"
+    },
+    "kendo-otp-lg-gap": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2, 0.5rem)"
+    },
+    "kendo-otp-separator-padding-x": {
+        "type": "String",
+        "value": "var(--kendo-spacing-1\\.5, 0.375rem)"
+    },
+    "kendo-otp-sm-separator-padding-x": {
+        "type": "String",
+        "value": "var(--kendo-spacing-1, 0.25rem)"
+    },
+    "kendo-otp-md-separator-padding-x": {
+        "type": "String",
+        "value": "var(--kendo-spacing-1\\.5, 0.375rem)"
+    },
+    "kendo-otp-lg-separator-padding-x": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2, 0.5rem)"
+    },
+    "kendo-otp-input-width": {
+        "type": "Calculation",
+        "value": "calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\\.5, 0.375rem) * 2 + (2px))"
+    },
+    "kendo-otp-sm-input-width": {
+        "type": "Calculation",
+        "value": "calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + (2px))"
+    },
+    "kendo-otp-md-input-width": {
+        "type": "Calculation",
+        "value": "calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\\.5, 0.375rem) * 2 + (2px))"
+    },
+    "kendo-otp-lg-input-width": {
+        "type": "Calculation",
+        "value": "calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + (2px))"
+    },
+    "kendo-otp-sizes": {
+        "type": "Map",
+        "value": "(sm: (gap: var(--kendo-spacing-1, 0.25rem), separator-padding-x: var(--kendo-spacing-1, 0.25rem), input-width: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + (2px))), md: (gap: var(--kendo-spacing-1\\.5, 0.375rem), separator-padding-x: var(--kendo-spacing-1\\.5, 0.375rem), input-width: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\\.5, 0.375rem) * 2 + (2px))), lg: (gap: var(--kendo-spacing-2, 0.5rem), separator-padding-x: var(--kendo-spacing-2, 0.5rem), input-width: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + (2px))))",
+        "prettyValue": {
+            "sm": {
+                "gap": "var(--kendo-spacing-1, 0.25rem)",
+                "separator-padding-x": "var(--kendo-spacing-1, 0.25rem)",
+                "input-width": "calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + (2px))"
+            },
+            "md": {
+                "gap": "var(--kendo-spacing-1\\.5, 0.375rem)",
+                "separator-padding-x": "var(--kendo-spacing-1\\.5, 0.375rem)",
+                "input-width": "calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\\.5, 0.375rem) * 2 + (2px))"
+            },
+            "lg": {
+                "gap": "var(--kendo-spacing-2, 0.5rem)",
+                "separator-padding-x": "var(--kendo-spacing-2, 0.5rem)",
+                "input-width": "calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + (2px))"
+            }
+        }
     }
 }

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "10.1.0-dev.5",
+    "version": "10.1.0-dev.6",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/fluent-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "10.1.0-dev.5",
+    "version": "10.1.0-dev.6",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "10.1.0-dev.5",
+    "version": "10.1.0-dev.6",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "10.1.0-dev.5",
+  "version": "10.1.0-dev.6",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -54,12 +54,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.0.0",
-    "@progress/kendo-theme-core": "10.1.0-dev.5",
-    "@progress/kendo-theme-utils": "10.1.0-dev.5"
+    "@progress/kendo-theme-core": "10.1.0-dev.6",
+    "@progress/kendo-theme-utils": "10.1.0-dev.6"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "eb34275876107de0d5b4c79eab212296aa0d5b88"
+  "gitHead": "202e78d7f12ef7ae4a2f25de43f1216470d378f2"
 }

package/scss/checkbox/_layout.scss

@@ -23,10 +23,6 @@
         position: relative;
         cursor: pointer;
         -webkit-appearance: none;
-
-        @if $kendo-checkbox-indicator-type == "image" {
-            background-size: var( --INTERNAL--kendo-checkbox-indicator-size, 100% );
-        }
     }
 
 
@@ -59,6 +55,16 @@
             top: 50%;
             left: 50%;
         }
+
+        @if $kendo-checkbox-indicator-type == "image" {
+            content: "";
+            display: block;
+            width: 100%;
+            height: 100%;
+            mask-size: var( --INTERNAL--kendo-checkbox-indicator-size, 100% );
+            mask-position: center;
+            mask-repeat: no-repeat;
+        }
     }
 
 
@@ -66,7 +72,10 @@
     .k-checkbox:hover,
     .k-checkbox.k-hover {
         @if $kendo-checkbox-indicator-type == "image" {
-            background-image: var( --kendo-checkbox-hover-image, #{ $kendo-checkbox-hover-image } );
+            &::before {
+                background-color: currentColor;
+                mask-image: var( --kendo-checkbox-hover-image, #{ $kendo-checkbox-hover-image } );
+            }
         }
 
         @if $kendo-checkbox-indicator-type == "pseudo" {
@@ -94,7 +103,10 @@
     .k-checkbox:checked,
     .k-checkbox.k-checked {
         @if $kendo-checkbox-indicator-type == "image" {
-            background-image: var( --kendo-checkbox-checked-image, #{ $kendo-checkbox-checked-image } );
+            &::before {
+                background-color: currentColor;
+                mask-image: var( --kendo-checkbox-checked-image, #{ $kendo-checkbox-checked-image } );
+            }
         }
 
         @if $kendo-checkbox-indicator-type == "pseudo" {
@@ -115,8 +127,11 @@
     .k-checkbox:indeterminate,
     .k-checkbox.k-indeterminate {
         @if $kendo-checkbox-indicator-type == "image" {
-            background-image: var( --kendo-checkbox-indeterminate-image, #{ $kendo-checkbox-indeterminate-image } );
-            background-size: var( --INTERNAL--kendo-checkbox-indeterminate-size, 100% );
+            &::before {
+                background-color: currentColor;
+                mask-image: var( --kendo-checkbox-indeterminate-image, #{ $kendo-checkbox-indeterminate-image } );
+                mask-size: var( --INTERNAL--kendo-checkbox-indeterminate-size, 100% );
+            }
         }
 
         @if $kendo-checkbox-indicator-type == "pseudo" {
@@ -136,7 +151,11 @@
     .k-checkbox:indeterminate:hover,
     .k-checkbox.k-indeterminate.k-hover {
         @if $kendo-checkbox-indicator-type == "image" {
-            background-image: var( --kendo-checkbox-hover-indeterminate-image, #{ $kendo-checkbox-hover-indeterminate-image } );
+            &::before {
+                background-color: currentColor;
+                mask-image: var( --kendo-checkbox-hover-indeterminate-image, #{ $kendo-checkbox-hover-indeterminate-image } );
+            }
+
         }
     }
 
@@ -145,13 +164,19 @@
     .k-checkbox:checked:disabled,
     .k-checkbox.k-checked.k-disabled {
         @if $kendo-checkbox-indicator-type == "image" {
-            background-image: var( --kendo-checkbox-disabled-checked-image, #{ $kendo-checkbox-disabled-checked-image } );
+            &::before {
+                background-color: currentColor;
+                mask-image: var( --kendo-checkbox-disabled-checked-image, #{ $kendo-checkbox-disabled-checked-image } );
+            }
         }
     }
     .k-checkbox:indeterminate:disabled,
     .k-checkbox.k-indeterminate.k-disabled {
         @if $kendo-checkbox-indicator-type == "image" {
-            background-image: var( --kendo-checkbox-disabled-indeterminate-image, #{ $kendo-checkbox-disabled-indeterminate-image } );
+            &::before {
+                background-color: currentColor;
+                mask-image: var( --kendo-checkbox-disabled-indeterminate-image, #{ $kendo-checkbox-disabled-indeterminate-image } );
+            }
         }
     }
 

package/scss/checkbox/_variables.scss

@@ -168,25 +168,25 @@ $kendo-checkbox-indeterminate-glyph: "\e121" !default;
 
 /// The image of the hovered CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-hover-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-hover-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+$kendo-checkbox-hover-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#323130' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
 /// The image of the checked CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+$kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
 /// The image of the indeterminate CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#{$kendo-checkbox-indeterminate-text}'/></svg>") ) !default;
+$kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#0078d4'/></svg>") ) !default;
 /// The image of the hovered and checked CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-hover-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-hover-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+$kendo-checkbox-hover-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
 /// The image of the hovered and indeterminate CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-hover-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#{$kendo-checkbox-hover-indeterminate-text}'/></svg>") ) !default;
+$kendo-checkbox-hover-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#106ebe'/></svg>") ) !default;
 /// The image of the checked CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-disabled-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+$kendo-checkbox-disabled-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
 /// The image of the indeterminate CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-disabled-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#{$kendo-checkbox-disabled-indeterminate-text}'/></svg>") ) !default;
+$kendo-checkbox-disabled-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#323130'/></svg>") ) !default;
 
 
 // Checkbox label

package/scss/dock-manager/_layout.scss

@@ -154,6 +154,10 @@
         border-radius: var( --kendo-dock-manager-dock-preview-border-radius, #{$kendo-dock-manager-dock-preview-border-radius} );
     }
 
+    .k-dock-manager-window:has(.k-pane) .k-window-content {
+        padding: 0;
+    }
+
 }
 
 @mixin  kendo-dock-indicator--layout() {

package/scss/index.scss

@@ -114,6 +114,7 @@
 @forward "./map/_index.scss";
 @forward "./orgchart/_index.scss";
 @forward "./signature/_index.scss";
+@forward "./otp/_index.scss";
 
 
 // Use component modules
@@ -202,6 +203,7 @@
 @use "./switch/index.scss" as *;
 @use "./upload/index.scss" as *;
 @use "./dropzone/index.scss" as *;
+@use "./otp/index.scss" as *;
 
 
 // Command interfaces
@@ -378,6 +380,7 @@
     @include kendo-switch--styles();
     @include kendo-upload--styles();
     @include kendo-dropzone--styles();
+    @include kendo-otp--styles();
 
 
     // Command interfaces

package/scss/input/_layout.scss

@@ -253,6 +253,59 @@
         }
     }
 
+    // Input group
+    .k-input-group {
+        margin: 0;
+        padding: 0;
+        border-width: 0;
+        box-sizing: border-box;
+        list-style: none;
+        outline: 0;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        vertical-align: middle;
+        position: relative;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+
+        > .k-input + .k-input {
+            margin-inline-start: if( $kendo-input-border-width == 0, null, -$kendo-input-border-width );
+        }
+
+        > .k-input:hover,
+        > .k-input.k-hover,
+        > .k-input:focus,
+        > .k-input:focus-within,
+        > .k-input.k-focus,
+        > .k-input:active,
+        > .k-input.k-active,
+        > .k-input.k-selected {
+            z-index: 2;
+        }
+
+        .k-input:not(:first-child):not(:last-child) {
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
+            border-start-start-radius: 0;
+            border-end-start-radius: 0;
+        }
+        > .k-input:first-child:not(:only-child) {
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
+        }
+        > .k-input:last-child:not(:only-child) {
+            border-start-start-radius: 0;
+            border-end-start-radius: 0;
+        }
+
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            opacity: 1;
+            filter: none;
+        }
+    }
+
     // Input with icon styles
     .k-input-icon,
     .k-input-validation-icon,

package/scss/input/_variables.scss

@@ -449,6 +449,13 @@ $kendo-picker-flat-disabled-bg: none !default;
 /// @group input
 $kendo-picker-flat-disabled-border: $kendo-picker-flat-disabled-text !default;
 
+/// The calculated height of the Input.
+/// @group input
+$kendo-input-calc-size: calc( ( #{$kendo-input-md-line-height} * 1em ) + ( #{$kendo-input-md-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
+$kendo-input-sm-calc-size: calc( ( #{$kendo-input-sm-line-height} * 1em ) + ( #{$kendo-input-sm-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
+$kendo-input-md-calc-size: calc( ( #{$kendo-input-md-line-height} * 1em ) + ( #{$kendo-input-md-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
+$kendo-input-lg-calc-size: calc( ( #{$kendo-input-lg-line-height} * 1em ) + ( #{$kendo-input-lg-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
+
 /// The sizes map for the Input components.
 /// @group input
 $kendo-input-sizes: (