@progress/kendo-theme-default 8.0.0-dev.0 → 8.0.0-dev.1

package/lib/swatches/default-blue.json

@@ -3,7 +3,7 @@
     "name": "Default Blue",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.1",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Default Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.1",
     "api": "legacy",
     "previewColors": [
         "#ff6358",

package/lib/swatches/default-green.json

@@ -3,7 +3,7 @@
     "name": "Default Green",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.1",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

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

@@ -3,7 +3,7 @@
     "name": "Default Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.1",
     "api": "legacy",
     "previewColors": [
         "#000000",

package/lib/swatches/default-main.json

@@ -3,7 +3,7 @@
     "name": "Default Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.1",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-nordic.json

@@ -3,7 +3,7 @@
     "name": "Default Nordic",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.1",
     "api": "legacy",
     "previewColors": [
         "#ffffff",
@@ -105,42 +105,42 @@
                 "primary-subtle": {
                     "name": "Primary Subtle",
                     "type": "color",
-                    "value": "#fadfe5"
+                    "value": "#d0e3ee"
                 },
                 "primary-subtle-hover": {
                     "name": "Primary Subtle Hover",
                     "type": "color",
-                    "value": "#f7c7d1"
+                    "value": "#B8D5E6"
                 },
                 "primary-subtle-active": {
                     "name": "Primary Subtle Active",
                     "type": "color",
-                    "value": "#f3b0bd"
+                    "value": "#A0C7DE"
                 },
                 "primary": {
                     "name": "Primary",
                     "type": "color",
-                    "value": "#e7607b"
+                    "value": "#1274AC"
                 },
                 "primary-hover": {
                     "name": "Primary Hover",
                     "type": "color",
-                    "value": "#de5c76"
+                    "value": "#10689B"
                 },
                 "primary-active": {
                     "name": "Primary Active",
                     "type": "color",
-                    "value": "#cb546c"
+                    "value": "#0E5D8A"
                 },
                 "primary-emphasis": {
                     "name": "Primary Emphasis",
                     "type": "color",
-                    "value": "#ed889c"
+                    "value": "#71ACCD"
                 },
                 "primary-on-subtle": {
                     "name": "Primary On Subtle",
                     "type": "color",
-                    "value": "#51222b"
+                    "value": "#072E45"
                 },
                 "on-primary": {
                     "name": "On Primary",
@@ -150,7 +150,7 @@
                 "primary-on-surface": {
                     "name": "Primary On Surface",
                     "type": "color",
-                    "value": "#ad485c"
+                    "value": "#1274AC"
                 },
                 "secondary-subtle": {
                     "name": "Secondary Subtle",

package/lib/swatches/default-ocean-blue-a11y.json

@@ -3,7 +3,7 @@
     "name": "Default Ocean Blue A11Y",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.1",
     "api": "legacy",
     "previewColors": [
         "#ffffff",
@@ -110,12 +110,12 @@
                 "primary-subtle-hover": {
                     "name": "Primary Subtle Hover",
                     "type": "color",
-                    "value": "#accee2"
+                    "value": "#B8D5E6"
                 },
                 "primary-subtle-active": {
                     "name": "Primary Subtle Active",
                     "type": "color",
-                    "value": "#89bad6"
+                    "value": "#A0C7DE"
                 },
                 "primary": {
                     "name": "Primary",
@@ -125,22 +125,22 @@
                 "primary-hover": {
                     "name": "Primary Hover",
                     "type": "color",
-                    "value": "#116fa5"
+                    "value": "#10689B"
                 },
                 "primary-active": {
                     "name": "Primary Active",
                     "type": "color",
-                    "value": "#106697"
+                    "value": "#0E5D8A"
                 },
                 "primary-emphasis": {
                     "name": "Primary Emphasis",
                     "type": "color",
-                    "value": "#4d97c1"
+                    "value": "#71ACCD"
                 },
                 "primary-on-subtle": {
                     "name": "Primary On Subtle",
                     "type": "color",
-                    "value": "#06293c"
+                    "value": "#072E45"
                 },
                 "on-primary": {
                     "name": "On Primary",
@@ -150,7 +150,7 @@
                 "primary-on-surface": {
                     "name": "Primary On Surface",
                     "type": "color",
-                    "value": "#0e5781"
+                    "value": "#1274AC"
                 },
                 "secondary-subtle": {
                     "name": "Secondary Subtle",

package/lib/swatches/default-ocean-blue.json

@@ -3,7 +3,7 @@
     "name": "Default Ocean Blue",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.1",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-orange.json

@@ -3,7 +3,7 @@
     "name": "Default Orange",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.1",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-purple.json

@@ -3,7 +3,7 @@
     "name": "Default Purple",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.1",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-turquoise.json

@@ -3,7 +3,7 @@
     "name": "Default Turquoise",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.1",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-urban.json

@@ -3,7 +3,7 @@
     "name": "Default Urban",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "8.0.0-dev.0",
+    "version": "8.0.0-dev.1",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "8.0.0-dev.0",
+  "version": "8.0.0-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -52,12 +52,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "2.1.0",
-    "@progress/kendo-theme-core": "8.0.0-dev.0",
-    "@progress/kendo-theme-utils": "8.0.0-dev.0"
+    "@progress/kendo-theme-core": "8.0.0-dev.1",
+    "@progress/kendo-theme-utils": "8.0.0-dev.1"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "82fa9745206aad68ed9f5a6d8c11d84dbb70c20c"
+  "gitHead": "798500c0cb615e834197322b581e870888968fd1"
 }

package/scss/_variables.scss

@@ -14,46 +14,6 @@ $kendo-use-input-spinner-icon-offset: false !default;
 
 $kendo-auto-bootstrap: true !default;
 
-
-// Spacing
-$kendo-spacing: (
-    0: 0,
-    1px: 1px,
-    0.5: 2px,
-    1: 4px,
-    1.5: 6px,
-    2: 8px,
-    2.5: 10px,
-    3: 12px,
-    3.5: 14px,
-    4: 16px,
-    4.5: 18px,
-    5: 20px,
-    5.5: 22px,
-    6: 24px,
-    6.5: 26px,
-    7: 28px,
-    7.5: 30px,
-    8: 32px,
-    9: 36px,
-    10: 40px,
-    11: 44px,
-    12: 48px,
-    13: 52px,
-    14: 56px,
-    15: 60px,
-    16: 64px,
-    17: 68px,
-    18: 72px,
-    19: 76px,
-    20: 80px,
-    21: 84px,
-    22: 88px,
-    23: 92px,
-    24: 96px
-) !default;
-
-
 /// Icon size.
 /// @group common
 $kendo-icon-size: 16px !default;
@@ -79,57 +39,6 @@ $kendo-icon-size-xxl: calc( #{$kendo-icon-size} * 2 ) !default;
 /// @group common
 $kendo-icon-size-xxxl: calc( #{$kendo-icon-size} * 3 ) !default;
 
-$kendo-icon-spacing: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-icon-padding: k-map-get( $kendo-spacing, 1 ) !default;
-
-/// Horizontal padding.
-/// @group common
-$kendo-padding-x: 8px !default;
-/// Vertical padding.
-/// @group common
-$kendo-padding-y: 4px !default;
-/// Small horizontal padding.
-/// @group common
-$kendo-padding-sm-x: k-map-get( $kendo-spacing, 1 ) !default;
-/// Small vertical padding.
-/// @group common
-$kendo-padding-sm-y: k-map-get( $kendo-spacing, 0.5 ) !default;
-/// Medium horizontal padding.
-/// @group common
-$kendo-padding-md-x: k-map-get( $kendo-spacing, 2 ) !default;
-/// Medium vertical padding.
-/// @group common
-$kendo-padding-md-y: k-map-get( $kendo-spacing, 1 ) !default;
-/// Large horizontal padding.
-/// @group common
-$kendo-padding-lg-x: k-map-get( $kendo-spacing, 3 ) !default;
-/// Large vertical padding.
-/// @group common
-$kendo-padding-lg-y: k-map-get( $kendo-spacing, 1.5 ) !default;
-
-/// Border radius for all components.
-/// @group common
-$kendo-border-radius: k-map-get( $kendo-spacing, 1 ) !default;
-/// Small border radius.
-/// @group common
-$kendo-border-radius-sm: $kendo-border-radius - k-map-get( $kendo-spacing, 0.5 ) !default;
-/// Medium border radius.
-/// @group common
-$kendo-border-radius-md: $kendo-border-radius !default;
-/// Large border radius.
-/// @group common
-$kendo-border-radius-lg: $kendo-border-radius + k-map-get( $kendo-spacing, 0.5 ) !default;
-
-$kendo-border-radii: (
-    DEFAULT: $kendo-border-radius-md,
-    0: 0,
-    sm: $kendo-border-radius-sm,
-    md: $kendo-border-radius-md,
-    lg: $kendo-border-radius-lg,
-    full: 9999px
-) !default;
-
-
 $kendo-zindex-popup: 1 !default;
 $kendo-zindex-window: 2 !default;
 $kendo-zindex-loading: 100 !default;
@@ -139,87 +48,6 @@ $kendo-zindex-loading: 100 !default;
 $kendo-is-dark-theme: false !default;
 
 
-
-
-// Typography
-
-/// Base font size across all components.
-/// @group typography
-$kendo-font-size: 14px !default;
-/// Extra small font size across all components.
-/// @group typography
-$kendo-font-size-xs: 10px !default;
-/// Small font size across all components.
-/// @group typography
-$kendo-font-size-sm: 12px !default;
-/// Medium font size across all components.
-/// @group typography
-$kendo-font-size-md: $kendo-font-size !default;
-/// Large font size across all components.
-/// @group typography
-$kendo-font-size-lg: 16px !default;
-/// Extra large font size across all components.
-/// @group typography
-$kendo-font-size-xl: 20px !default;
-
-$kendo-font-sizes: (
-    xs: $kendo-font-size-xs,
-    sm: $kendo-font-size-sm,
-    md: $kendo-font-size-md,
-    lg: $kendo-font-size-lg,
-    xl: $kendo-font-size-xl
-) !default;
-
-/// Font family for text.
-/// @group typography
-$kendo-font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-
-/// Font family for monospaced text. Used for styling the code.
-/// @group typography
-$kendo-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
-
-/// Font family across all components.
-/// @group typography
-$kendo-font-family: inherit !default;
-
-/// Line height used along with $kendo-font-size.
-/// @group typography
-$kendo-line-height: k-math-div( 20, 14 ) !default;
-/// Extra small line height used along with $kendo-font-size-xs.
-/// @group typography
-$kendo-line-height-xs: 1 !default;
-/// Small line height used along with $kendo-font-size-sm.
-/// @group typography
-$kendo-line-height-sm: 1.25 !default;
-/// Medium line height used along with $kendo-font-size-md.
-/// @group typography
-$kendo-line-height-md: $kendo-line-height !default;
-/// Large line height used along with $kendo-font-size-lg.
-/// @group typography
-$kendo-line-height-lg: 1.5 !default;
-$kendo-line-height-em: calc( #{$kendo-line-height} * 1em ) !default;
-
-/// Light font weight.
-/// @group typography
-$kendo-font-weight-light: 300 !default;
-/// Normal font weight.
-/// @group typography
-$kendo-font-weight-normal: 400 !default;
-/// Medium font weight.
-/// @group typography
-$kendo-font-weight-medium: 500 !default;
-/// Semibold font weight.
-/// @group typography
-$kendo-font-weight-semibold: 600 !default;
-/// Bold font weight.
-/// @group typography
-$kendo-font-weight-bold: 700 !default;
-
-/// Letter spacing.
-/// @group typography
-$kendo-letter-spacing: null !default;
-
-
 // TODO: refactor
 /// Box shadow of focused items.
 $kendo-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;

package/scss/action-buttons/_variables.scss

@@ -1,9 +1,9 @@
 // Actions
-$kendo-actions-margin-top: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-actions-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-actions-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-actions-margin-top: k-spacing(4) !default;
+$kendo-actions-padding-x: k-spacing(2) !default;
+$kendo-actions-padding-y: k-spacing(2) !default;
 $kendo-actions-border-width: 0px !default;
-$kendo-actions-button-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-actions-button-spacing: k-spacing(2) !default;
 
 $kendo-actions-bg: null !default;
 $kendo-actions-text: null !default;

package/scss/action-sheet/_layout.scss

@@ -253,7 +253,7 @@
         }
 
         .k-actionsheet-filter {
-            width: calc( min(100%, calc( 360px - #{$kendo-adaptive-actionsheet-titlebar-padding-x * 2}) ) );
+            width: calc( min(100%, calc( 360px - calc( #{$kendo-adaptive-actionsheet-titlebar-padding-x} * 2 )) ) );
         }
         .k-actionsheet-content,
         .k-actionsheet-footer {

package/scss/action-sheet/_variables.scss

@@ -10,9 +10,9 @@ $kendo-actionsheet-max-height: 60vh !default;
 $kendo-actionsheet-border-width: 0px !default;
 $kendo-actionsheet-border-radius: 0px !default;
 
-$kendo-actionsheet-font-size: $kendo-font-size-md !default;
-$kendo-actionsheet-font-family: $kendo-font-family !default;
-$kendo-actionsheet-line-height: $kendo-line-height-md !default;
+$kendo-actionsheet-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-actionsheet-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-actionsheet-line-height: var( --kendo-line-height, normal ) !default;
 
 $kendo-actionsheet-bg: $kendo-component-bg !default;
 $kendo-actionsheet-text: $kendo-component-text !default;
@@ -21,13 +21,13 @@ $kendo-actionsheet-shadow: k-elevation(7) !default;
 
 
 // Actionsheet header
-$kendo-actionsheet-titlebar-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-actionsheet-titlebar-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-actionsheet-titlebar-padding-x: k-spacing(4) !default;
+$kendo-actionsheet-titlebar-padding-y: k-spacing(2) !default;
 $kendo-actionsheet-titlebar-border-width: null !default;
 $kendo-actionsheet-titlebar-font-size: null !default;
 $kendo-actionsheet-titlebar-font-family: null !default;
 $kendo-actionsheet-titlebar-line-height: null !default;
-$kendo-actionsheet-titlebar-gap: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-actionsheet-titlebar-gap: k-spacing(4) !default;
 
 $kendo-actionsheet-titlebar-bg: null !default;
 $kendo-actionsheet-titlebar-text: null !default;
@@ -35,17 +35,17 @@ $kendo-actionsheet-titlebar-border: null !default;
 $kendo-actionsheet-titlebar-gradient: null !default;
 $kendo-actionsheet-titlebar-shadow: null !default;
 
-$kendo-actionsheet-subtitle-font-size: $kendo-font-size-sm !default;
-$kendo-actionsheet-subtitle-line-height: $kendo-line-height-sm !default;
+$kendo-actionsheet-subtitle-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-actionsheet-subtitle-line-height: var( --kendo-line-height-sm, normal ) !default;
 $kendo-actionsheet-subtitle-text: $kendo-subtle-text !default;
 
 
 // Actionsheet item
 $kendo-actionsheet-item-min-height: 40px !default;
-$kendo-actionsheet-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-actionsheet-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-actionsheet-item-padding-x: k-spacing(4) !default;
+$kendo-actionsheet-item-padding-y: k-spacing(2) !default;
 $kendo-actionsheet-item-border-width: 1px !default;
-$kendo-actionsheet-item-spacing: 12px !default;
+$kendo-actionsheet-item-spacing: k-spacing(3) !default;
 
 $kendo-actionsheet-item-title-font-weight: null !default;
 $kendo-actionsheet-item-title-text-transform: null !default;
@@ -73,14 +73,14 @@ $kendo-actionsheet-item-disabled-shadow: null !default;
 
 
 // Adaptive Actionsheet
-$kendo-adaptive-actionsheet-font-size: $kendo-font-size-lg !default;
+$kendo-adaptive-actionsheet-font-size: var( --kendo-font-size-lg, inherit ) !default;
 $kendo-adaptive-actionsheet-titlebar-border-width: 1px !default;
-$kendo-adaptive-actionsheet-titlebar-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-adaptive-actionsheet-titlebar-padding-y: k-spacing(4) !default;
 $kendo-adaptive-actionsheet-titlebar-padding-x: $kendo-adaptive-actionsheet-titlebar-padding-y !default;
 $kendo-adaptive-actionsheet-titlebar-border: $kendo-component-border !default;
 
-$kendo-adaptive-actionsheet-content-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-adaptive-actionsheet-content-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-adaptive-actionsheet-content-padding-y: k-spacing(2) !default;
+$kendo-adaptive-actionsheet-content-padding-x: k-spacing(4) !default;
 
-$kendo-adaptive-actionsheet-footer-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-adaptive-actionsheet-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-adaptive-actionsheet-footer-padding-y: k-spacing(2) !default;
+$kendo-adaptive-actionsheet-footer-padding-x: k-spacing(4) !default;

package/scss/adaptive/_layout.scss

@@ -348,7 +348,7 @@
     .k-pane-wrapper { // stylelint-disable-line
 
         .k-appbar {
-            padding: k-map-get( $kendo-spacing, 1 );
+            padding: k-spacing(1);
         }
 
         .k-list-title,
@@ -372,15 +372,15 @@
             }
         }
         .k-listgroup + .k-listgroup {
-            margin-top: k-map-get( $kendo-spacing, 4 );
+            margin-top: k-spacing(4);
         }
 
         // Column menu
         .k-column-menu {
-            padding: k-map-get( $kendo-spacing, 2 );
+            padding: k-spacing(2);
             display: flex;
             flex-flow: column nowrap;
-            gap: k-map-get( $kendo-spacing, 2 );
+            gap: k-spacing(2);
 
             .k-filter-item .k-filterable * {
                 pointer-events: none;
@@ -392,16 +392,16 @@
             }
 
             .k-listgroup {
-                margin-inline: -#{k-map-get( $kendo-spacing, 2 )};
+                margin-inline: calc( #{k-spacing(2)} * -1 );
             }
         }
 
         // Filter menu
         .k-filter-menu {
-            padding: k-map-get( $kendo-spacing, 2 );
+            padding: k-spacing(2);
             display: flex;
             flex-flow: column nowrap;
-            gap: k-map-get( $kendo-spacing, 2 );
+            gap: k-spacing(2);
 
             .k-list-title {
                 padding: 0;
@@ -421,7 +421,7 @@
             }
 
             .k-listgroup {
-                margin-inline: -#{k-map-get( $kendo-spacing, 2 )};
+                margin-inline: calc( #{k-spacing(2)} * -1 );
             }
         }
 

package/scss/adaptive/_variables.scss

@@ -15,9 +15,9 @@ $kendo-adaptive-menu-item-border: $kendo-component-border !default;
 $kendo-adaptive-menu-title-text: $kendo-component-text !default;
 
 $kendo-adaptive-border-width: 1px !default;
-$kendo-adaptive-font-family: $kendo-font-family !default;
-$kendo-adaptive-font-size: $kendo-font-size-md !default;
-$kendo-adaptive-line-height: $kendo-line-height-md !default;
+$kendo-adaptive-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-adaptive-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-adaptive-line-height: var( --kendo-line-height, normal ) !default;
 
 
 // Adaptive Grid

package/scss/appbar/_variables.scss

@@ -8,10 +8,10 @@ $kendo-appbar-margin-x: null !default;
 $kendo-appbar-margin-y: null !default;
 /// The horizontal padding of the AppBar.
 /// @group appbar
-$kendo-appbar-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-appbar-padding-x: k-spacing(2) !default;
 /// The vertical padding of the AppBar.
 /// @group appbar
-$kendo-appbar-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-appbar-padding-y: k-spacing(2) !default;
 /// The width of the border around the AppBar.
 /// @group appbar
 $kendo-appbar-border-width: 0px !default;
@@ -20,17 +20,17 @@ $kendo-appbar-border-width: 0px !default;
 $kendo-appbar-zindex: 1000 !default;
 /// The font family of the AppBar.
 /// @group appbar
-$kendo-appbar-font-family: $kendo-font-family !default;
+$kendo-appbar-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the AppBar.
 /// @group appbar
-$kendo-appbar-font-size: $kendo-font-size-md !default;
+$kendo-appbar-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the AppBar.
 /// @group appbar
-$kendo-appbar-line-height: $kendo-line-height-md !default;
+$kendo-appbar-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The spacing between the AppBar sections.
 /// @group appbar
-$kendo-appbar-gap: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-appbar-gap: k-spacing(2) !default;
 
 /// The background color of the AppBar based on light theme color.
 /// @group appbar