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

package/scss/calendar/_variables.scss

@@ -1,134 +1,131 @@
-@import "../typography/_variables.scss";
-
-
 // Calendar
 
-$calendar-border-width: 1px !default;
-$calendar-font-family: $font-family !default;
-$calendar-font-size: $font-size !default;
-$calendar-line-height: $line-height !default;
+$kendo-calendar-border-width: 1px !default;
+$kendo-calendar-font-family: $kendo-font-family !default;
+$kendo-calendar-font-size: $kendo-font-size-md !default;
+$kendo-calendar-line-height: $kendo-line-height-md !default;
 
-$calendar-cell-size: 32px !default;
+$kendo-calendar-cell-size: 32px !default;
 
-$calendar-bg: $kendo-component-bg !default;
-$calendar-text: $kendo-component-text !default;
-$calendar-border: $kendo-component-border !default;
+$kendo-calendar-bg: $kendo-component-bg !default;
+$kendo-calendar-text: $kendo-component-text !default;
+$kendo-calendar-border: $kendo-component-border !default;
 
-$calendar-header-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
-$calendar-header-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
-$calendar-header-border-width: 1px !default;
+$kendo-calendar-header-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-header-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-header-border-width: 1px !default;
 
-$calendar-header-bg: $kendo-component-header-bg !default;
-$calendar-header-text: $kendo-component-header-text !default;
-$calendar-header-border: $kendo-component-header-border !default;
-$calendar-header-gradient: $kendo-component-header-gradient !default;
-$calendar-header-shadow: 0 1px 3px 1px rgba(black, .1) !default;
+$kendo-calendar-header-bg: $kendo-component-header-bg !default;
+$kendo-calendar-header-text: $kendo-component-header-text !default;
+$kendo-calendar-header-border: $kendo-component-header-border !default;
+$kendo-calendar-header-gradient: $kendo-component-header-gradient !default;
+$kendo-calendar-header-shadow: 0 1px 3px 1px rgba(black, .1) !default;
 
-$calendar-nav-gap: null !default;
+$kendo-calendar-nav-gap: null !default;
 
-$calendar-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$calendar-footer-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-calendar-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-calendar-footer-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 
-$calendar-cell-padding-x: .25em !default;
-$calendar-cell-padding-y: $calendar-cell-padding-x !default;
-$calendar-cell-line-height: $calendar-line-height !default;
-$calendar-cell-border-radius: $kendo-border-radius-md !default;
+$kendo-calendar-cell-padding-x: .25em !default;
+$kendo-calendar-cell-padding-y: $kendo-calendar-cell-padding-x !default;
+$kendo-calendar-cell-line-height: $kendo-calendar-line-height !default;
+$kendo-calendar-cell-border-radius: $kendo-border-radius-md !default;
 
-$calendar-header-cell-padding-x: null !default;
-$calendar-header-cell-padding-y: null !default;
-$calendar-header-cell-width: $calendar-cell-size !default;
-$calendar-header-cell-height: $calendar-cell-size !default;
-$calendar-header-cell-font-size: $font-size-sm !default;
-$calendar-header-cell-line-height: 2 !default;
-$calendar-header-cell-bg: null !default;
-$calendar-header-cell-text: $kendo-subtle-text !default;
-$calendar-header-cell-opacity: null !default;
+$kendo-calendar-header-cell-padding-x: null !default;
+$kendo-calendar-header-cell-padding-y: null !default;
+$kendo-calendar-header-cell-width: $kendo-calendar-cell-size !default;
+$kendo-calendar-header-cell-height: $kendo-calendar-cell-size !default;
+$kendo-calendar-header-cell-font-size: $kendo-font-size-sm !default;
+$kendo-calendar-header-cell-line-height: 2 !default;
+$kendo-calendar-header-cell-bg: null !default;
+$kendo-calendar-header-cell-text: $kendo-subtle-text !default;
+$kendo-calendar-header-cell-opacity: null !default;
 
-$calendar-caption-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$calendar-caption-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
-$calendar-caption-height: $calendar-cell-size !default;
-$calendar-caption-font-size: null !default;
-$calendar-caption-line-height: null !default;
-$calendar-caption-font-weight: bold !default;
+$kendo-calendar-caption-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-calendar-caption-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-caption-height: $kendo-calendar-cell-size !default;
+$kendo-calendar-caption-font-size: null !default;
+$kendo-calendar-caption-line-height: null !default;
+$kendo-calendar-caption-font-weight: bold !default;
 
-$calendar-view-width: ($calendar-cell-size * 8) !default;
-$calendar-view-height: ($calendar-cell-size * 7) !default;
-$calendar-view-gap: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-calendar-view-width: ($kendo-calendar-cell-size * 8) !default;
+$kendo-calendar-view-height: ($kendo-calendar-cell-size * 7) !default;
+$kendo-calendar-view-gap: k-map-get( $kendo-spacing, 4 ) !default;
 
-$calendar-weekend-bg: null !default;
-$calendar-weekend-text: null !default;
+$kendo-calendar-weekend-bg: null !default;
+$kendo-calendar-weekend-text: null !default;
 
-$calendar-today-style: color !default;
-$calendar-today-color: $kendo-color-primary !default;
+$kendo-calendar-today-style: color !default;
+$kendo-calendar-today-color: $kendo-color-primary !default;
 
-$calendar-week-number-bg: null !default;
-$calendar-week-number-text: $calendar-header-cell-text !default;
+$kendo-calendar-week-number-bg: null !default;
+$kendo-calendar-week-number-text: $kendo-calendar-header-cell-text !default;
 
-$calendar-other-month-bg: null !default;
-$calendar-other-month-text: $calendar-header-cell-text !default;
+$kendo-calendar-other-month-bg: null !default;
+$kendo-calendar-other-month-text: $kendo-calendar-header-cell-text !default;
 
-$calendar-cell-bg: null !default;
-$calendar-cell-text: null !default;
-$calendar-cell-border: null !default;
-$calendar-cell-gradient: null !default;
+$kendo-calendar-cell-bg: null !default;
+$kendo-calendar-cell-text: null !default;
+$kendo-calendar-cell-border: null !default;
+$kendo-calendar-cell-gradient: null !default;
 
-$calendar-cell-hover-bg: $kendo-hover-bg !default;
-$calendar-cell-hover-text: $kendo-hover-text !default;
-$calendar-cell-hover-border: $kendo-hover-border !default;
-$calendar-cell-hover-gradient: null !default;
+$kendo-calendar-cell-hover-bg: $kendo-hover-bg !default;
+$kendo-calendar-cell-hover-text: $kendo-hover-text !default;
+$kendo-calendar-cell-hover-border: $kendo-hover-border !default;
+$kendo-calendar-cell-hover-gradient: null !default;
 
-$calendar-cell-selected-bg: $kendo-selected-bg !default;
-$calendar-cell-selected-text: $kendo-selected-text !default;
-$calendar-cell-selected-border: $kendo-selected-border !default;
-$calendar-cell-selected-gradient: null !default;
+$kendo-calendar-cell-selected-bg: $kendo-selected-bg !default;
+$kendo-calendar-cell-selected-text: $kendo-selected-text !default;
+$kendo-calendar-cell-selected-border: $kendo-selected-border !default;
+$kendo-calendar-cell-selected-gradient: null !default;
 
-$calendar-cell-selected-hover-bg: $kendo-selected-hover-bg !default;
-$calendar-cell-selected-hover-text: $kendo-selected-hover-text !default;
-$calendar-cell-selected-hover-border: null !default;
-$calendar-cell-selected-hover-gradient: null !default;
+$kendo-calendar-cell-selected-hover-bg: $kendo-selected-hover-bg !default;
+$kendo-calendar-cell-selected-hover-text: $kendo-selected-hover-text !default;
+$kendo-calendar-cell-selected-hover-border: null !default;
+$kendo-calendar-cell-selected-hover-gradient: null !default;
 
-$calendar-cell-focus-shadow: inset 0 0 0 2px rgba( $kendo-color-black, .08 ) !default;
-$calendar-cell-selected-focus-shadow: $calendar-cell-focus-shadow !default;
+$kendo-calendar-cell-focus-shadow: inset 0 0 0 2px rgba( $kendo-color-black, .08 ) !default;
+$kendo-calendar-cell-selected-focus-shadow: $kendo-calendar-cell-focus-shadow !default;
 
 
 // Calendar navigation
-$calendar-navigation-width: 5em !default;
-$calendar-navigation-item-height: 2em !default;
+$kendo-calendar-navigation-width: 5em !default;
+$kendo-calendar-navigation-item-height: 2em !default;
 
-$calendar-navigation-bg: $calendar-header-bg !default;
-$calendar-navigation-text: $calendar-header-text !default;
-$calendar-navigation-border: $calendar-header-border !default;
+$kendo-calendar-navigation-bg: $kendo-calendar-header-bg !default;
+$kendo-calendar-navigation-text: $kendo-calendar-header-text !default;
+$kendo-calendar-navigation-border: $kendo-calendar-header-border !default;
 
-$calendar-navigation-hover-text: $link-hover-text !default;
+$kendo-calendar-navigation-hover-text: $kendo-link-hover-text !default;
 
 
 // Infinite calendar
-$infinite-calendar-header-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$infinite-calendar-header-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-infinite-calendar-header-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-infinite-calendar-header-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 
-$infinite-calendar-view-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$infinite-calendar-view-padding-y: 0px !default;
-$infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
+$kendo-infinite-calendar-view-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-infinite-calendar-view-padding-y: 0px !default;
+$kendo-infinite-calendar-view-height: ( $kendo-calendar-cell-size * 9 ) !default;
 
 
 // Multiview calendar
 
 
 // Calendar sizes
-$kendo-calendar-sm-font-size: $font-size-md !default;
-$kendo-calendar-sm-line-height: $line-height-md !default;
+$kendo-calendar-sm-font-size: $kendo-font-size-md !default;
+$kendo-calendar-sm-line-height: $kendo-line-height-md !default;
 $kendo-calendar-sm-cell-size: 28px !default;
 $kendo-calendar-sm-cell-padding-x: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 $kendo-calendar-sm-cell-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 
-$kendo-calendar-md-font-size: $font-size-md !default;
-$kendo-calendar-md-line-height: $line-height-md !default;
+$kendo-calendar-md-font-size: $kendo-font-size-md !default;
+$kendo-calendar-md-line-height: $kendo-line-height-md !default;
 $kendo-calendar-md-cell-size: 32px !default;
 $kendo-calendar-md-cell-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
 $kendo-calendar-md-cell-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 
-$kendo-calendar-lg-font-size: $font-size-lg !default;
-$kendo-calendar-lg-line-height: $line-height-lg !default;
+$kendo-calendar-lg-font-size: $kendo-font-size-lg !default;
+$kendo-calendar-lg-line-height: $kendo-line-height-lg !default;
 $kendo-calendar-lg-cell-size: 40px !default;
 $kendo-calendar-lg-cell-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 $kendo-calendar-lg-cell-padding-y: k-map-get( $kendo-spacing, 2 ) !default;

package/scss/captcha/_layout.scss

@@ -2,14 +2,14 @@
 
     // Captcha
     .k-captcha {
-        width: $captcha-width;
+        width: $kendo-captcha-width;
         box-sizing: border-box;
-        font-size: $captcha-font-size;
-        font-family: $captcha-font-family;
-        line-height: $captcha-line-height;
+        font-size: $kendo-captcha-font-size;
+        font-family: $kendo-captcha-font-family;
+        line-height: $kendo-captcha-line-height;
         display: flex;
         flex-flow: column nowrap;
-        gap: $captcha-gap;
+        gap: $kendo-captcha-gap;
 
         *,
         *::before,
@@ -21,12 +21,12 @@
     // Image
     .k-captcha-image-wrap {
         position: relative;
-        gap: $captcha-image-wrap-gap;
+        gap: $kendo-captcha-image-wrap-gap;
     }
 
     .k-captcha-image-controls {
         position: relative;
-        gap: $captcha-image-controls-gap;
+        gap: $kendo-captcha-image-controls-gap;
     }
 
     .k-captcha-image {
@@ -54,9 +54,9 @@
 
     // Verification Success
     .k-captcha-validation-message {
-        margin-top: $captcha-validation-message-margin-top;
-        font-size: $captcha-validation-message-font-size;
-        font-style: $captcha-validation-message-font-style;
+        margin-top: $kendo-captcha-validation-message-margin-top;
+        font-size: $kendo-captcha-validation-message-font-size;
+        font-style: $kendo-captcha-validation-message-font-style;
     }
 
 }

package/scss/captcha/_theme.scss

@@ -3,9 +3,9 @@
     // Captcha
     .k-captcha {
         @include fill(
-            $captcha-text,
-            $captcha-bg,
-            $captcha-border
+            $kendo-captcha-text,
+            $kendo-captcha-bg,
+            $kendo-captcha-border
         );
     }
 

package/scss/captcha/_variables.scss

@@ -1,19 +1,19 @@
 // Captcha
-$captcha-spacer: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-captcha-spacer: k-map-get( $kendo-spacing, 2 ) !default;
 
-$captcha-width: 280px !default;
-$captcha-font-family: $font-family !default;
-$captcha-font-size: $font-size !default;
-$captcha-line-height: $line-height !default;
-$captcha-gap: $captcha-spacer !default;
-$captcha-bg: $kendo-component-bg !default;
-$captcha-text: $kendo-component-bg !default;
-$captcha-border: $kendo-component-bg !default;
+$kendo-captcha-width: 280px !default;
+$kendo-captcha-font-family: $kendo-font-family !default;
+$kendo-captcha-font-size: $kendo-font-size-md !default;
+$kendo-captcha-line-height: $kendo-line-height-md !default;
+$kendo-captcha-gap: $kendo-captcha-spacer !default;
+$kendo-captcha-bg: $kendo-component-bg !default;
+$kendo-captcha-text: $kendo-component-bg !default;
+$kendo-captcha-border: $kendo-component-bg !default;
 
-$captcha-image-wrap-gap: $captcha-spacer !default;
+$kendo-captcha-image-wrap-gap: $kendo-captcha-spacer !default;
 
-$captcha-image-controls-gap: $captcha-spacer !default;
+$kendo-captcha-image-controls-gap: $kendo-captcha-spacer !default;
 
-$captcha-validation-message-margin-top: k-math-div( $captcha-spacer, 2 ) !default;
-$captcha-validation-message-font-size: $font-size-sm !default;
-$captcha-validation-message-font-style: italic !default;
+$kendo-captcha-validation-message-margin-top: k-math-div( $kendo-captcha-spacer, 2 ) !default;
+$kendo-captcha-validation-message-font-size: $kendo-font-size-sm !default;
+$kendo-captcha-validation-message-font-style: italic !default;

package/scss/card/_layout.scss

@@ -13,14 +13,14 @@
 
     // Card
     .k-card {
-        @include border-radius( $card-border-radius );
-        border-width: $card-border-width;
+        @include border-radius( $kendo-card-border-radius );
+        border-width: $kendo-card-border-width;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $card-font-family;
-        font-size: $card-font-size;
-        line-height: $card-line-height;
+        font-family: $kendo-card-font-family;
+        font-size: $kendo-card-font-size;
+        line-height: $kendo-card-line-height;
         display: flex;
         flex-direction: column;
         position: relative;
@@ -35,7 +35,7 @@
         }
     }
     .k-card > .k-card-inner {
-        @include border-radius( $card-inner-border-radius );
+        @include border-radius( $kendo-card-inner-border-radius );
         display: flex;
         flex-direction: inherit;
         overflow: hidden;
@@ -50,8 +50,8 @@
 
     // Header
     .k-card-header {
-        padding: $card-header-padding-y $card-header-padding-x;
-        border-width: 0 0 $card-header-border-width;
+        padding: $kendo-card-header-padding-y $kendo-card-header-padding-x;
+        border-width: 0 0 $kendo-card-header-border-width;
         border-style: solid;
         outline: 0;
         flex-shrink: 0;
@@ -65,15 +65,15 @@
         }
         .k-card-title + .k-card-subtitle,
         .k-card-subtitle + .k-card-subtitle {
-            margin-top: $card-title-margin-bottom;
+            margin-top: $kendo-card-title-margin-bottom;
         }
     }
 
 
     // Footer
     .k-card-footer {
-        padding: $card-footer-padding-y $card-footer-padding-x;
-        border-width: $card-footer-border-width 0 0;
+        padding: $kendo-card-footer-padding-y $kendo-card-footer-padding-x;
+        border-width: $kendo-card-footer-border-width 0 0;
         border-style: solid;
         outline: 0;
         flex-shrink: 0;
@@ -82,12 +82,12 @@
 
     // Body
     .k-card-body {
-        padding: $card-body-padding-y $card-body-padding-x;
+        padding: $kendo-card-body-padding-y $kendo-card-body-padding-x;
         outline: 0;
         flex: 1 1 auto;
 
         p {
-            margin: $paragraph-margin;
+            margin: $kendo-paragraph-margin;
         }
 
         > .k-last,
@@ -104,10 +104,10 @@
     // Card avatar
     .k-card-avatar,
     .k-card .k-avatar {
-        margin-right: $card-avatar-spacing;
-        width: $card-avatar-size;
-        height: $card-avatar-size;
-        flex-basis: $card-avatar-size;
+        margin-right: $kendo-card-avatar-spacing;
+        width: $kendo-card-avatar-size;
+        height: $kendo-card-avatar-size;
+        flex-basis: $kendo-card-avatar-size;
     }
 
 
@@ -125,7 +125,7 @@
         }
 
         .k-card-horizontal & {
-            max-width: $card-img-max-width;
+            max-width: $kendo-card-img-max-width;
             object-fit: cover;
         }
     }
@@ -133,26 +133,26 @@
 
     // Card title
     .k-card-title {
-        margin: 0 0 $card-title-margin-bottom;
+        margin: 0 0 $kendo-card-title-margin-bottom;
         @include typography(
-            $card-title-font-size,
-            $card-title-font-family,
-            $card-title-line-height,
-            $card-title-font-weight,
-            $card-title-letter-spacing
+            $kendo-card-title-font-size,
+            $kendo-card-title-font-family,
+            $kendo-card-title-line-height,
+            $kendo-card-title-font-weight,
+            $kendo-card-title-letter-spacing
         );
     }
 
 
     // Card subtitle
     .k-card-subtitle {
-        margin: 0 0 $card-subtitle-margin-bottom;
+        margin: 0 0 $kendo-card-subtitle-margin-bottom;
         @include typography(
-            $card-subtitle-font-size,
-            $card-subtitle-font-family,
-            $card-subtitle-line-height,
-            $card-subtitle-font-weight,
-            $card-subtitle-letter-spacing
+            $kendo-card-subtitle-font-size,
+            $kendo-card-subtitle-font-family,
+            $kendo-card-subtitle-line-height,
+            $kendo-card-subtitle-font-weight,
+            $kendo-card-subtitle-letter-spacing
         );
     }
 
@@ -185,7 +185,7 @@
 
     // Card actions
     .k-card-actions {
-        padding: $card-actions-padding-y $card-actions-padding-x;
+        padding: $kendo-card-actions-padding-y $kendo-card-actions-padding-x;
         border-width: 0;
         border-style: solid;
         border-color: inherit;
@@ -193,7 +193,7 @@
         display: flex;
         flex-shrink: 0;
         flex-basis: auto;
-        gap: $card-actions-gap;
+        gap: $kendo-card-actions-gap;
     }
 
 
@@ -228,7 +228,7 @@
         display: flex;
         flex-flow: column nowrap;
         align-items: stretch;
-        gap: $card-deck-gap;
+        gap: $kendo-card-deck-gap;
         flex: 0 0 auto;
 
         .k-card {
@@ -242,7 +242,7 @@
         display: flex;
         flex-flow: row nowrap;
         align-items: stretch;
-        gap: $card-deck-gap;
+        gap: $kendo-card-deck-gap;
         flex: 0 0 auto;
 
         .k-card {
@@ -261,17 +261,17 @@
         overflow: hidden;
 
         > .k-button {
-            @include border-radius( $card-deck-scroll-button-radius );
+            @include border-radius( $kendo-card-deck-scroll-button-radius );
             flex: 0 0 auto;
             position: absolute;
             z-index: 1;
 
             &:first-child {
-                left: $card-deck-scroll-button-offset;
+                left: $kendo-card-deck-scroll-button-offset;
             }
 
             &:last-child {
-                right: $card-deck-scroll-button-offset;
+                right: $kendo-card-deck-scroll-button-offset;
             }
         }
 
@@ -298,19 +298,19 @@
             flex: 0 0 auto;
         }
         .k-card + .k-card {
-            margin-inline-start: $card-border-width;
+            margin-inline-start: $kendo-card-border-width;
         }
 
 
         // Border-radius
         .k-card.k-first {
-            @include border-left-radius( $card-border-radius );
+            @include border-left-radius( $kendo-card-border-radius );
         }
         .k-card.k-last {
-            @include border-right-radius( $card-border-radius );
+            @include border-right-radius( $kendo-card-border-radius );
         }
         .k-card.k-only {
-            @include border-radius( $card-border-radius );
+            @include border-radius( $kendo-card-border-radius );
         }
     }
 
@@ -328,9 +328,9 @@
 
     .k-card-callout {
         margin: 0;
-        width: $card-callout-width;
-        height: $card-callout-height;
-        border-width: $card-border-width;
+        width: $kendo-card-callout-width;
+        height: $kendo-card-callout-height;
+        border-width: $kendo-card-border-width;
         border-style: solid;
         box-sizing: border-box;
         position: absolute;
@@ -367,7 +367,7 @@
 
     // Solid card
     .k-card-solid {
-        @include box-shadow( $card-shadow );
+        @include box-shadow( $kendo-card-shadow );
     }
 
 

package/scss/card/_theme.scss

@@ -3,11 +3,11 @@
     // Card
     .k-card {
         @include fill(
-            $card-text,
-            $card-bg,
-            $card-border
+            $kendo-card-text,
+            $kendo-card-bg,
+            $kendo-card-border
         );
-        @include box-shadow( $card-shadow );
+        @include box-shadow( $kendo-card-shadow );
 
         .k-card-inner {
             background-color: inherit;
@@ -17,47 +17,47 @@
         &:focus,
         &.k-focus {
             @include fill(
-                $card-focus-text,
-                $card-focus-bg,
-                $card-focus-border
+                $kendo-card-focus-text,
+                $kendo-card-focus-bg,
+                $kendo-card-focus-border
             );
-            @include focus-indicator( $card-focus-shadow );
+            @include focus-indicator( $kendo-card-focus-shadow );
         }
 
         &.k-selected {
-            @include box-shadow( $card-focus-shadow );
+            @include box-shadow( $kendo-card-focus-shadow );
         }
     }
 
 
     // Card actions
     .k-card-actions {
-        border-color: $card-border;
+        border-color: $kendo-card-border;
     }
 
 
     // Header
     .k-card-header {
-        @include fill( $card-header-text, $card-header-bg, $card-header-border );
+        @include fill( $kendo-card-header-text, $kendo-card-header-bg, $kendo-card-header-border );
     }
 
 
     // Footer
     .k-card-footer {
-        @include fill( $card-footer-text, $card-footer-bg, $card-footer-border );
+        @include fill( $kendo-card-footer-text, $kendo-card-footer-bg, $kendo-card-footer-border );
     }
 
 
     // Separator
     .k-card-separator,
     .k-card .k-separator {
-        border-color: $card-border;
+        border-color: $kendo-card-border;
     }
 
 
     // TODO: refactor
     .k-card-subtitle {
-        color: $card-subtitle-text;
+        color: $kendo-card-subtitle-text;
     }
 
 
@@ -80,7 +80,7 @@
         &.k-focus,
         &.k-selected {
             > .k-card {
-                @include focus-indicator( $card-focus-shadow );
+                @include focus-indicator( $kendo-card-focus-shadow );
             }
         }
     }