@progress/kendo-theme-default 5.12.1-dev.2 → 5.12.1-dev.4

package/lib/swatches/default-urban.json

@@ -3,7 +3,8 @@
     "name": "Default Urban",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.12.1-dev.2",
+    "version": "5.12.1-dev.4",
+    "api": "legacy",
     "previewColors": [
         "#ffffff",
         "#e3eef4",
@@ -13,44 +14,40 @@
     ],
     "components": [],
     "groups": [
-        {
-            "variables": {
-                "border-radius": {
-                    "name": "Border radius",
-                    "type": "number",
-                    "value": "2px"
-                }
-            }
-        },
         {
             "name": "Theme colors",
             "variables": {
-                "primary": {
+                "kendo-is-dark-theme": {
+                    "name": "Dark theme",
+                    "type": "boolean",
+                    "value": false
+                },
+                "kendo-color-primary": {
                     "name": "Primary",
                     "type": "color",
                     "value": "#ff5c1a"
                 },
-                "secondary": {
+                "kendo-color-secondary": {
                     "name": "Secondary",
                     "type": "color",
                     "value": "#73a9c9"
                 },
-                "info": {
+                "kendo-color-info": {
                     "name": "Info",
                     "type": "color",
                     "value": "#5bc0de"
                 },
-                "success": {
+                "kendo-color-success": {
                     "name": "Success",
                     "type": "color",
                     "value": "#5cb85c"
                 },
-                "warning": {
+                "kendo-color-warning": {
                     "name": "Warning",
                     "type": "color",
                     "value": "#ffbb5b"
                 },
-                "error": {
+                "kendo-color-error": {
                     "name": "Error",
                     "type": "color",
                     "value": "#e3470e"
@@ -60,27 +57,22 @@
         {
             "name": "Body",
             "variables": {
-                "body-text": {
+                "kendo-body-text": {
                     "name": "Body text color",
                     "type": "color",
                     "value": "#000000"
                 },
-                "body-bg": {
+                "kendo-body-bg": {
                     "name": "Body background",
                     "type": "color",
                     "value": "#ffffff"
                 },
-                "headings-text": {
-                    "name": "Headings text color",
-                    "type": "color",
-                    "value": "#141414"
-                },
-                "subtle-text": {
+                "kendo-subtle-text": {
                     "name": "Subtle text color",
                     "type": "color",
                     "value": "#6c757d"
                 },
-                "disabled-text": {
+                "kendo-disabled-text": {
                     "name": "Disabled text color",
                     "type": "color",
                     "value": "#8f8f8f"
@@ -90,42 +82,42 @@
         {
             "name": "Components",
             "variables": {
-                "component-color": {
+                "kendo-component-color": {
                     "name": "Component text",
                     "type": "color",
                     "value": "#1c3a4c"
                 },
-                "component-bg": {
+                "kendo-component-bg": {
                     "name": "Component background",
                     "type": "color",
                     "value": "#ffffff"
                 },
-                "base-text": {
+                "kendo-base-text": {
                     "name": "Header text color",
                     "type": "color",
                     "value": "#1c3a4c"
                 },
-                "base-bg": {
+                "kendo-base-bg": {
                     "name": "Header background",
                     "type": "color",
                     "value": "#e3eef4"
                 },
-                "hovered-text": {
+                "kendo-hover-text": {
                     "name": "Hover text color",
                     "type": "color",
                     "value": "#16181b"
                 },
-                "hovered-bg": {
+                "kendo-hover-bg": {
                     "name": "Hover background",
                     "type": "color",
                     "value": "#cfdee6"
                 },
-                "selected-text": {
+                "kendo-selected-text": {
                     "name": "Selected text color",
                     "type": "color",
                     "value": "#ffffff"
                 },
-                "selected-bg": {
+                "kendo-selected-bg": {
                     "name": "Selected background",
                     "type": "color",
                     "value": "#ff5c1a"
@@ -150,12 +142,12 @@
         {
             "name": "Link",
             "variables": {
-                "link-text": {
+                "kendo-link-text": {
                     "name": "Link text color",
                     "type": "color",
                     "value": "#ff5c1a"
                 },
-                "link-hover-text": {
+                "kendo-link-hover-text": {
                     "name": "Link hover text color",
                     "type": "color",
                     "value": "#e65317"
@@ -165,32 +157,32 @@
         {
             "name": "Dataviz",
             "variables": {
-                "series-a": {
+                "kendo-series-a": {
                     "name": "Series A",
                     "type": "color",
                     "value": "#ff7943"
                 },
-                "series-b": {
+                "kendo-series-b": {
                     "name": "Series B",
                     "type": "color",
                     "value": "#e84d0e"
                 },
-                "series-c": {
+                "kendo-series-c": {
                     "name": "Series C",
                     "type": "color",
                     "value": "#40a9e3"
                 },
-                "series-d": {
+                "kendo-series-d": {
                     "name": "Series D",
                     "type": "color",
                     "value": "#016a98"
                 },
-                "series-e": {
+                "kendo-series-e": {
                     "name": "Series E",
                     "type": "color",
                     "value": "#7a8c95"
                 },
-                "series-f": {
+                "kendo-series-f": {
                     "name": "Series F",
                     "type": "color",
                     "value": "#355261"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "5.12.1-dev.2",
+  "version": "5.12.1-dev.4",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -48,8 +48,8 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "^1.0.0",
-    "@progress/kendo-theme-core": "^5.12.1-dev.2",
-    "@progress/kendo-theme-utils": "^5.12.1-dev.2"
+    "@progress/kendo-theme-core": "^5.12.1-dev.4",
+    "@progress/kendo-theme-utils": "^5.12.1-dev.4"
   },
-  "gitHead": "14365a5e53996a453f9d6ad72894a3e4666e6ede"
+  "gitHead": "a62113f259ebc1b7722c0871fb93955f8bf4c409"
 }

package/scss/_variables.scss

@@ -8,6 +8,7 @@ $kendo-enable-shadows: true !default;
 $kendo-enable-gradients: true !default;
 $kendo-enable-transitions: true !default;
 $kendo-enable-focus-contrast: false !default;
+$kendo-enable-typography: false !default;
 
 $kendo-use-input-button-width: true !default;
 $kendo-use-input-spinner-width: true !default;
@@ -53,8 +54,6 @@ $kendo-spacing: (
     24: 96px
 ) !default;
 
-$default-scrollbar-width: 17px !default;
-
 
 // Icons
 $kendo-icon-size: 16px !default;
@@ -102,7 +101,7 @@ $kendo-zindex-loading: 100 !default;
 
 
 // Color settings
-$dark-theme: false !default;
+$kendo-is-dark-theme: false !default;
 
 // Theme colors
 /// The color that focuses the user attention.
@@ -185,7 +184,7 @@ $kendo-color-light: #ebebeb !default;
 
 /// Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
 /// @group color-system
-$kendo-color-inverse: if( $dark-theme, $kendo-color-light, $kendo-color-dark ) !default;
+$kendo-color-inverse: if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark ) !default;
 
 
 $kendo-theme-colors: (
@@ -206,49 +205,55 @@ $kendo-theme-colors: (
 
 /// Base font size across all components.
 /// @group typography
-$font-size: 14px !default;
-$font-size-xs: 10px !default;
-$font-size-sm: 12px !default;
-$font-size-md: $font-size !default;
-$font-size-lg: 16px !default;
-$font-size-xl: 20px !default;
+$kendo-font-size: 14px !default;
+$kendo-font-size-xs: 10px !default;
+$kendo-font-size-sm: 12px !default;
+$kendo-font-size-md: $kendo-font-size !default;
+$kendo-font-size-lg: 16px !default;
+$kendo-font-size-xl: 20px !default;
 
 $kendo-font-sizes: (
-    xs: $font-size-xs,
-    sm: $font-size-sm,
-    md: $font-size-md,
-    lg: $font-size-lg,
-    xl: $font-size-xl
+    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 across all components.
+/// Font family for text.
 /// @group typography
-$font-family: inherit !default;
+$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
-$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
+$kendo-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
 
-/// Line height used along with $font-size.
+/// Font family across all components.
 /// @group typography
-$line-height: k-math-div( 20, 14 ) !default;
-$line-height-xs: 1 !default;
-$line-height-sm: 1.25 !default;
-$line-height-md: $line-height !default;
-$line-height-lg: 1.5 !default;
-$line-height-em: calc( #{$line-height} * 1em ) !default;
+$kendo-font-family: inherit !default;
 
+/// Line height used along with $kendo-font-size.
+/// @group typography
+$kendo-line-height: k-math-div( 20, 14 ) !default;
+$kendo-line-height-xs: 1 !default;
+$kendo-line-height-sm: 1.25 !default;
+$kendo-line-height-md: $kendo-line-height !default;
+$kendo-line-height-lg: 1.5 !default;
+$kendo-line-height-em: calc( #{$kendo-line-height} * 1em ) !default;
 
 // Font weight
-$font-weight-light: 300 !default;
-$font-weight-normal: 400 !default;
-$font-weight-bold: 700 !default;
-
+$kendo-font-weight-light: 300 !default;
+$kendo-font-weight-normal: 400 !default;
+$kendo-font-weight-medium: 500 !default;
+$kendo-font-weight-semibold: 600 !default;
+$kendo-font-weight-bold: 700 !default;
 
 // Letter Spacing
-$letter-spacing: null !default;
+$kendo-letter-spacing: null !default;
 
 
+// Generic styles
+
 // Root styles
 $kendo-body-bg: $kendo-color-white !default;
 $kendo-body-text: #424242 !default;
@@ -259,6 +264,10 @@ $kendo-app-bg: k-try-shade( $kendo-body-bg, .25 ) !default;
 $kendo-app-text: $kendo-body-text !default;
 $kendo-app-border: rgba( $kendo-color-black, .08 ) !default;
 
+// Link
+$kendo-link-text: $kendo-color-primary !default;
+$kendo-link-hover-text: $kendo-color-primary-darker !default;
+
 
 // Components
 
@@ -274,40 +283,40 @@ $kendo-component-text: $kendo-body-text !default;
 /// Border color of a component.
 /// Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.
 /// @group component
-$kendo-component-border: rgba( if( $dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) !default;
+$kendo-component-border: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) !default;
 
 
 /// The background of the components' chrome area.
-$base-bg: #fafafa !default;
+$kendo-base-bg: #fafafa !default;
 /// The text color of the components' chrome area.
-$base-text: $kendo-body-text !default;
+$kendo-base-text: $kendo-body-text !default;
 /// The border color of the components' chrome area.
-$base-border: rgba( black, .08 ) !default;
+$kendo-base-border: rgba( black, .08 ) !default;
 /// The gradient background of the components' chrome area.
-$base-gradient: rgba( black, 0 ), rgba( black, .02 ) !default;
+$kendo-base-gradient: rgba( black, 0 ), rgba( black, .02 ) !default;
 
 /// The background of hovered items.
-$kendo-hover-bg: k-try-shade( $base-bg, .5 ) !default;
+$kendo-hover-bg: k-try-shade( $kendo-base-bg, .5 ) !default;
 /// The text color of hovered items.
-$kendo-hover-text: $base-text !default;
+$kendo-hover-text: $kendo-base-text !default;
 /// The border color of hovered items.
-$kendo-hover-border: $base-border !default;
+$kendo-hover-border: $kendo-base-border !default;
 /// The gradient background of hovered items.
-$kendo-hover-gradient: $base-gradient !default;
+$kendo-hover-gradient: $kendo-base-gradient !default;
 
 /// The background of selected items.
 $kendo-selected-bg: $kendo-color-primary !default;
 /// The text color of selected items.
 $kendo-selected-text: k-contrast-legacy( $kendo-selected-bg ) !default;
 /// The border color of selected items.
-$kendo-selected-border: $base-border !default;
+$kendo-selected-border: $kendo-base-border !default;
 /// The gradient background of selected items.
-$kendo-selected-gradient: $base-gradient !default;
+$kendo-selected-gradient: $kendo-base-gradient !default;
 
 $kendo-selected-hover-bg: k-try-shade( $kendo-selected-bg, .5 ) !default;
 $kendo-selected-hover-text: $kendo-selected-text !default;
-$kendo-selected-hover-border: $base-border !default;
-$kendo-selected-hover-gradient: $base-gradient !default;
+$kendo-selected-hover-border: $kendo-base-border !default;
+$kendo-selected-hover-gradient: $kendo-base-gradient !default;
 
 // TODO: refactor
 $kendo-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
@@ -332,9 +341,9 @@ $kendo-disabled-styling: (
 
 
 // Header
-$kendo-component-header-bg: $base-bg !default;
-$kendo-component-header-text: $base-text !default;
-$kendo-component-header-border: $base-border !default;
+$kendo-component-header-bg: $kendo-base-bg !default;
+$kendo-component-header-text: $kendo-base-text !default;
+$kendo-component-header-border: $kendo-base-border !default;
 $kendo-component-header-gradient: null !default;
 
 
@@ -343,9 +352,3 @@ $kendo-invalid-bg: null !default;
 $kendo-invalid-text: $kendo-color-error !default;
 $kendo-invalid-border: $kendo-color-error !default;
 $kendo-invalid-shadow: null !default;
-
-
-// Layout
-$grid-cols: 12 !default;
-$grid-rows: 10 !default;
-$grid-gap: 10px !default;

package/scss/action-buttons/_layout.scss

@@ -1,16 +1,16 @@
 @include exports("action-buttons/layout") {
 
     .k-actions {
-        padding: $actions-padding-y $actions-padding-x;
+        padding: $kendo-actions-padding-y $kendo-actions-padding-x;
         box-sizing: border-box;
-        border-width: $actions-border-width 0 0 0;
+        border-width: $kendo-actions-border-width 0 0 0;
         border-style: solid;
         border-color: inherit;
         flex-shrink: 0;
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
-        gap: $actions-button-spacing;
+        gap: $kendo-actions-button-spacing;
         overflow: hidden;
         // TODO: remove
         clear: both;
@@ -25,7 +25,7 @@
 
     // Actions in popup
     .k-popup .k-actions {
-        margin-top: $actions-margin-top;
+        margin-top: $kendo-actions-margin-top;
     }
 
 

package/scss/action-buttons/_theme.scss

@@ -2,10 +2,10 @@
 
     .k-actions {
         @include fill(
-            $actions-text,
-            $actions-bg,
-            $actions-border,
-            $actions-gradient
+            $kendo-actions-text,
+            $kendo-actions-bg,
+            $kendo-actions-border,
+            $kendo-actions-gradient
         );
     }
 

package/scss/action-buttons/_variables.scss

@@ -1,11 +1,11 @@
 // Actions
-$actions-margin-top: k-map-get( $kendo-spacing, 4 ) !default;
-$actions-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$actions-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-$actions-border-width: 0px !default;
-$actions-button-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+$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-border-width: 0px !default;
+$kendo-actions-button-spacing: k-map-get( $kendo-spacing, 2 ) !default;
 
-$actions-bg: null !default;
-$actions-text: null !default;
-$actions-border: null !default;
-$actions-gradient: null !default;
+$kendo-actions-bg: null !default;
+$kendo-actions-text: null !default;
+$kendo-actions-border: null !default;
+$kendo-actions-gradient: null !default;

package/scss/action-sheet/_layout.scss

@@ -56,19 +56,19 @@
 
     // Actionsheet
     .k-actionsheet {
-        padding-block: $actionsheet-padding-y;
-        padding-inline: $actionsheet-padding-y;
-        width: var( --kendo-actionsheet-width, #{$actionsheet-width} );
-        height: var( --kendo-actionsheet-height, #{$actionsheet-height} );
-        max-width: var( --kendo-actionsheet-max-width, #{$actionsheet-max-width} );
-        max-height: var( --kendo-actionsheet-max-height, #{$actionsheet-max-height} );
+        padding-block: $kendo-actionsheet-padding-y;
+        padding-inline: $kendo-actionsheet-padding-y;
+        width: var( --kendo-actionsheet-width, #{$kendo-actionsheet-width} );
+        height: var( --kendo-actionsheet-height, #{$kendo-actionsheet-height} );
+        max-width: var( --kendo-actionsheet-max-width, #{$kendo-actionsheet-max-width} );
+        max-height: var( --kendo-actionsheet-max-height, #{$kendo-actionsheet-max-height} );
         border-width: 0;
         border-style: solid;
         border-color: transparent;
         box-sizing: border-box;
-        font-size: $actionsheet-font-size;
-        font-family: $actionsheet-font-family;
-        line-height: $actionsheet-line-height;
+        font-size: $kendo-actionsheet-font-size;
+        font-family: $kendo-actionsheet-font-family;
+        line-height: $kendo-actionsheet-line-height;
         overflow: hidden;
         position: relative;
 
@@ -82,19 +82,19 @@
 
     // Actionsheet titlebar
     .k-actionsheet-titlebar {
-        padding: $actionsheet-titlebar-padding-y $actionsheet-titlebar-padding-x;
+        padding: $kendo-actionsheet-titlebar-padding-y $kendo-actionsheet-titlebar-padding-x;
         border-width: 0;
-        border-bottom-width: if( $actionsheet-titlebar-border-width, $actionsheet-titlebar-border-width, null );
+        border-bottom-width: if( $kendo-actionsheet-titlebar-border-width, $kendo-actionsheet-titlebar-border-width, null );
         border-style: solid;
         border-color: transparent;
-        font-size: $actionsheet-titlebar-font-size;
-        font-family: $actionsheet-titlebar-font-family;
-        line-height: $actionsheet-titlebar-line-height;
+        font-size: $kendo-actionsheet-titlebar-font-size;
+        font-family: $kendo-actionsheet-titlebar-font-family;
+        line-height: $kendo-actionsheet-titlebar-line-height;
         flex: none;
         display: flex;
         flex-flow: column nowrap;
         align-items: center;
-        gap: $actionsheet-titlebar-gap;
+        gap: $kendo-actionsheet-titlebar-gap;
     }
     .k-actionsheet-titlebar-group {
         display: flex;
@@ -106,8 +106,8 @@
         flex: 1;
     }
     .k-actionsheet-subtitle {
-        font-size: $actionsheet-subtitle-font-size;
-        line-height: $actionsheet-subtitle-line-height;
+        font-size: $kendo-actionsheet-subtitle-font-size;
+        line-height: $kendo-actionsheet-subtitle-line-height;
     }
     .k-actionsheet-actions {
         flex: none;
@@ -147,8 +147,8 @@
     }
     .k-actionsheet-action {
         margin: 0;
-        padding: $actionsheet-item-padding-y $actionsheet-item-padding-x;
-        min-height: $actionsheet-item-min-height;
+        padding: $kendo-actionsheet-item-padding-y $kendo-actionsheet-item-padding-x;
+        min-height: $kendo-actionsheet-item-min-height;
         box-sizing: border-box;
         color: inherit;
         text-decoration: none;
@@ -156,21 +156,21 @@
         display: flex;
         flex-flow: row nowrap;
         align-items: flex-start;
-        gap: $actionsheet-item-spacing;
+        gap: $kendo-actionsheet-item-spacing;
     }
     .k-actionsheet-item-icon {
-        font-size: $actionsheet-item-icon-size;
+        font-size: $kendo-actionsheet-item-icon-size;
     }
     .k-actionsheet-item-text {
         display: flex;
         flex-flow: column nowrap;
     }
     .k-actionsheet-item-title {
-        font-weight: $actionsheet-item-title-font-weight;
-        text-transform: $actionsheet-item-title-text-transform;
+        font-weight: $kendo-actionsheet-item-title-font-weight;
+        text-transform: $kendo-actionsheet-item-title-text-transform;
     }
     .k-actionsheet-item-description {
-        font-size: $actionsheet-item-description-font-size;
+        font-size: $kendo-actionsheet-item-description-font-size;
     }
 
 
@@ -184,33 +184,33 @@
 
     // Action sheet position
     .k-actionsheet-top {
-        @include border-bottom-radius( $actionsheet-border-radius );
-        border-width: if( $actionsheet-border-width, $actionsheet-border-width, null );
-        border-top-width: if( $actionsheet-border-width, 0, null );
+        @include border-bottom-radius( $kendo-actionsheet-border-radius );
+        border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null );
+        border-top-width: if( $kendo-actionsheet-border-width, 0, null );
         top: 0;
         left: 50%;
         transform: translateX( -50% );
     }
     .k-actionsheet-bottom {
-        @include border-top-radius( $actionsheet-border-radius );
-        border-width: if( $actionsheet-border-width, $actionsheet-border-width, null );
-        border-bottom-width: if( $actionsheet-border-width, 0, null );
+        @include border-top-radius( $kendo-actionsheet-border-radius );
+        border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null );
+        border-bottom-width: if( $kendo-actionsheet-border-width, 0, null );
         bottom: 0;
         left: 50%;
         transform: translateX( -50% );
     }
     .k-actionsheet-left {
-        @include border-right-radius( $actionsheet-border-radius );
-        border-width: if( $actionsheet-border-width, $actionsheet-border-width, null );
-        border-left-width: if( $actionsheet-border-width, 0, null );
+        @include border-right-radius( $kendo-actionsheet-border-radius );
+        border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null );
+        border-left-width: if( $kendo-actionsheet-border-width, 0, null );
         left: 0;
         top: 50%;
         transform: translateY( -50% );
     }
     .k-actionsheet-right {
-        @include border-left-radius( $actionsheet-border-radius );
-        border-width: if( $actionsheet-border-width, $actionsheet-border-width, null );
-        border-right-width: if( $actionsheet-border-width, 0, null );
+        @include border-left-radius( $kendo-actionsheet-border-radius );
+        border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null );
+        border-right-width: if( $kendo-actionsheet-border-width, 0, null );
         right: 0;
         top: 50%;
         transform: translateY( -50% );
@@ -243,20 +243,20 @@
         flex-flow: column nowrap;
 
         .k-actionsheet-titlebar {
-            padding: $adaptive-actionsheet-titlebar-padding-y $adaptive-actionsheet-titlebar-padding-x;
-            border-bottom-width: $adaptive-actionsheet-titlebar-border-width;
+            padding: $kendo-adaptive-actionsheet-titlebar-padding-y $kendo-adaptive-actionsheet-titlebar-padding-x;
+            border-bottom-width: $kendo-adaptive-actionsheet-titlebar-border-width;
         }
 
         .k-actionsheet-content {
-            padding: $adaptive-actionsheet-content-padding-y $adaptive-actionsheet-content-padding-x;
+            padding: $kendo-adaptive-actionsheet-content-padding-y $kendo-adaptive-actionsheet-content-padding-x;
         }
 
         .k-actionsheet-footer {
-            padding: $adaptive-actionsheet-footer-padding-y $adaptive-actionsheet-footer-padding-x;
+            padding: $kendo-adaptive-actionsheet-footer-padding-y $kendo-adaptive-actionsheet-footer-padding-x;
         }
 
         .k-actionsheet-filter {
-            width: calc( min(100%, calc( 360px - #{$adaptive-actionsheet-titlebar-padding-x * 2}) ) );
+            width: calc( min(100%, calc( 360px - #{$kendo-adaptive-actionsheet-titlebar-padding-x * 2}) ) );
         }
         .k-actionsheet-content,
         .k-actionsheet-footer {