@progress/kendo-theme-bootstrap 5.0.0-beta.2 → 5.0.0-beta.6

package/scss/checkbox/_variables.scss

@@ -1,124 +1,132 @@
 // Checkbox
 
-/// The sizes of checkbox.
+/// Border width of checkbox.
 /// @group checkbox
+$kendo-checkbox-border-width: 1px !default;
+
+// Checkbox sizes
 $kendo-checkbox-sizes: (
-    sm: map-get( $spacing, 3 ),
-    md: map-get( $spacing, 4 ),
-    lg: map-get( $spacing, 6 )
+    sm: (
+        size: map-get( $spacing, 3 ),
+        glyph-size: ( map-get( $spacing, 3 ) - map-get( $spacing, thin ) ),
+        ripple-size: map-get( $spacing, 3 ) * 3
+    ),
+    md: (
+        size: map-get( $spacing, 4 ),
+        glyph-size: ( map-get( $spacing, 4 ) - map-get( $spacing, thin ) ),
+        ripple-size: map-get( $spacing, 4 ) * 3
+    ),
+    lg: (
+        size: map-get( $spacing, 5 ),
+        glyph-size: ( map-get( $spacing, 5 ) - map-get( $spacing, thin ) ),
+        ripple-size: map-get( $spacing, 5 ) * 3
+    )
 ) !default;
 
-/// The  border width of checkbox.
-/// @group checkbox
-$kendo-checkbox-border-width: 1px !default;
-/// The line height of checkbox.
-/// @group checkbox
-$kendo-checkbox-line-height: calc( #{map-get( $kendo-checkbox-sizes, "md" )} + #{$kendo-checkbox-border-width} ) !default;
-
-/// The background of checkbox.
+/// Background color of checkbox.
 /// @group checkbox
 $kendo-checkbox-bg: $component-bg !default;
-/// The background of checkbox.
+/// Color of checkbox.
 /// @group checkbox
 $kendo-checkbox-text: null !default;
-/// The border of checkbox.
+/// Border color of checkbox.
 /// @group checkbox
 $kendo-checkbox-border: contrast-wcag( $kendo-checkbox-bg, $gray-400, $gray-600 ) !default;
 
-/// The background of hovered checkbox.
+/// Background color of hovered checkbox.
 /// @group checkbox
 $kendo-checkbox-hover-bg: null !default;
-/// The text of hovered checkbox.
+/// Color of hovered checkbox.
 /// @group checkbox
 $kendo-checkbox-hover-text: null !default;
-/// The border of hovered checkbox.
+/// Border color of hovered checkbox.
 /// @group checkbox
 $kendo-checkbox-hover-border: null !default;
 
-/// The background of checked checkbox.
+/// Background color of checked checkbox.
 /// @group checkbox
 $kendo-checkbox-checked-bg: $primary !default;
-/// The text of checked checkbox.
+/// Color of checked checkbox.
 /// @group checkbox
 $kendo-checkbox-checked-text: contrast-wcag( $kendo-checkbox-checked-bg ) !default;
-/// The border of checked checkbox.
+/// Border color of checked checkbox.
 /// @group checkbox
 $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
 
-/// The background of indeterminate checkbox.
+/// Background color of indeterminate checkbox.
 /// @group checkbox
 $kendo-checkbox-indeterminate-bg: $kendo-checkbox-checked-bg !default;
-/// The text of indeterminate checkbox.
+/// Color of indeterminate checkbox.
 /// @group checkbox
 $kendo-checkbox-indeterminate-text: $kendo-checkbox-checked-text !default;
-/// The border of indeterminate checkbox.
+/// Border color of indeterminate checkbox.
 /// @group checkbox
 $kendo-checkbox-indeterminate-border: $kendo-checkbox-checked-border !default;
 
-/// The border of focused checkbox.
+/// Border color of focused checkbox.
 /// @group checkbox
 $kendo-checkbox-focus-border: try-tint( $primary, 50% ) !default;
-/// The shadow of focused checkbox.
+/// Box shadow of focused checkbox.
 /// @group checkbox
 $kendo-checkbox-focus-shadow: 0 0 0 .25rem rgba( $primary, .25 ) !default;
-/// The border of focused and checked checkbox.
+/// Border color of focused and checked checkbox.
 /// @group checkbox
 $kendo-checkbox-focus-checked-border: $kendo-checkbox-checked-border !default;
-/// The shadow of focused and checked checkbox.
+/// Box shadow of focused and checked checkbox.
 /// @group checkbox
 $kendo-checkbox-focus-checked-shadow: $kendo-checkbox-focus-shadow !default;
 
-/// The background of disabled checkbox.
+/// Background color of disabled checkbox.
 /// @group checkbox
 $kendo-checkbox-disabled-bg: null !default;
-/// The text of disabled checkbox.
+/// Color of disabled checkbox.
 /// @group checkbox
 $kendo-checkbox-disabled-text: null !default;
-/// The border of disabled checkbox.
+/// Border color of disabled checkbox.
 /// @group checkbox
 $kendo-checkbox-disabled-border: null !default;
 
-/// The background of disabled and checked checkbox.
+/// Background color of disabled and checked checkbox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-bg: null !default;
-/// The text of disabled and checked checkbox.
+/// Color of disabled and checked checkbox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-text: null !default;
-/// The border of disabled and checked checkbox.
+/// Color of disabled and checked checkbox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-border: null !default;
 
-/// The background of invalid checkbox.
+/// Background color of invalid checkbox.
 /// @group checkbox
 $kendo-checkbox-invalid-bg: null !default;
-/// The text of invalid checkbox.
+/// Color of invalid checkbox.
 /// @group checkbox
 $kendo-checkbox-invalid-text: $invalid-text !default;
-/// The border of invalid checkbox.
+/// Border color of invalid checkbox.
 /// @group checkbox
 $kendo-checkbox-invalid-border: $invalid-border !default;
 
 
 // Checkbox indicator
 
-/// The icon type of checked checkbox.
+/// Type of checkbox indicator.
 /// @group checkbox
-$kendo-checkbox-icon-type: image !default;
+$kendo-checkbox-indicator-type: image !default;
 
-/// The glyph font family of checkbox.
+/// Glyph font family of checkbox indicator.
 /// @group checkbox
 $kendo-checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
-/// The glyph of checked checkbox.
+/// Glyph of checkbox indicator.
 /// @group checkbox
 $kendo-checkbox-checked-glyph: "\e118" !default;
-/// The glyph of indeterminate checkbox.
+/// Glyph of indeterminate checkbox indicator.
 /// @group checkbox
 $kendo-checkbox-indeterminate-glyph: "\e121" !default;
 
-/// The image of checked checkbox.
+/// Image of checked checkbox indicator.
 /// @group checkbox
 $kendo-checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") ) !default;
-/// The image of indeterminate checkbox.
+/// Image of checked checkbox indicator.
 /// @group checkbox
 $kendo-checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") ) !default;
 
@@ -132,39 +140,22 @@ $kendo-checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
 
 // Checkbox list
 
-/// The list margin checkbox.
+/// Spacing between items of horizontal checkbox list.
 /// @group checkbox
-$kendo-checkbox-list-margin: 0px !default;
-/// The list padding checkbox.
-/// @group checkbox
-$kendo-checkbox-list-padding: 0px !default;
-/// The horizontal list item padding of checkbox.
+$kendo-checkbox-list-spacing: map-get( $spacing, 4 ) !default;
+/// Horizontal padding of checkbox list items.
 /// @group checkbox
 $kendo-checkbox-list-item-padding-x: 0px !default;
-/// The vertical list item padding of checkbox.
+/// Vertical padding of checkbox list items.
 /// @group checkbox
 $kendo-checkbox-list-item-padding-y: $kendo-list-item-padding-y-md !default;
-/// The horizontal margin of list item of checkbox.
-/// @group checkbox
-$kendo-checkbox-list-horizontal-item-margin-x: 32px !default;
 
 
 // Checkbox ripple
 
-/// The ripple size of checkbox.
+/// Background color of checkbox ripple.
 /// @group checkbox
-$kendo-checkbox-ripple-size: (
-    sm: (map-get( $kendo-checkbox-sizes, "sm" ) * 3),
-    md: (map-get( $kendo-checkbox-sizes, "md" ) * 3),
-    lg: (map-get( $kendo-checkbox-sizes, "lg" ) * 3)
-) !default;
-/// The ripple margin of checkbox.
-/// @group checkbox
-$kendo-checkbox-ripple-margin: (
-    sm: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "sm" )} + #{$kendo-checkbox-border-width})),
-    md: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "md" )} + #{$kendo-checkbox-border-width})),
-    lg: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "lg" )} + #{$kendo-checkbox-border-width}))
-) !default;
-/// The ripple opacity of checkbox.
+$kendo-checkbox-ripple-bg: $kendo-checkbox-checked-bg !default;
+/// Opacity of checkbox ripple.
 /// @group checkbox
-$kendo-checkbox-ripple-opacity: .3 !default;
+$kendo-checkbox-ripple-opacity: .25 !default;

package/scss/chip/_variables.scss

@@ -9,28 +9,28 @@ $kendo-chip-spacing: map-get( $spacing, 2 );
 
 /// Horizontal padding of the chip.
 /// @group chip
-$kendo-chip-padding-x: $padding-x-sm !default;
-$kendo-chip-padding-x-sm: $kendo-chip-padding-x / 2 !default;
-$kendo-chip-padding-x-md: ($kendo-chip-padding-x - map-get( $spacing, "hair" )) !default;
-$kendo-chip-padding-x-lg: $kendo-chip-padding-x * 1.25 !default;
+$kendo-chip-padding-x: map-get( $spacing, 1 ) !default;
+$kendo-chip-padding-x-sm: map-get( $spacing, 1 ) !default;
+$kendo-chip-padding-x-md: map-get( $spacing, 1 ) !default;
+$kendo-chip-padding-x-lg: map-get( $spacing, 1 ) !default;
 
 /// Vertical padding of the chip.
 /// @group chip
-$kendo-chip-padding-y: $kendo-chip-padding-x !default;
-$kendo-chip-padding-y-sm: $kendo-chip-padding-x-sm !default;
-$kendo-chip-padding-y-md: $kendo-chip-padding-x-md !default;
-$kendo-chip-padding-y-lg: $kendo-chip-padding-x-lg !default;
+$kendo-chip-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-chip-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin )  !default;
+$kendo-chip-padding-y-md: map-get( $spacing, 1 ) !default;
+$kendo-chip-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
 
 /// Font sizes of the chip.
 /// @group chip
-$kendo-chip-font-size: $font-size !default;
-$kendo-chip-font-size-sm: $font-size-sm !default;
-$kendo-chip-font-size-md: $font-size !default;
-$kendo-chip-font-size-lg: $font-size-lg !default;
+$kendo-chip-font-size: $font-size-md !default;
+$kendo-chip-font-size-sm: $font-size-md !default;
+$kendo-chip-font-size-md: $font-size-md !default;
+$kendo-chip-font-size-lg: $font-size-md !default;
 
 /// Line heights of the chip that are connected to the $font-size.
 /// @group chip
-$kendo-chip-line-height: normal !default;
+$kendo-chip-line-height: 1.375 !default;
 $kendo-chip-line-height-sm: $kendo-chip-line-height !default;
 $kendo-chip-line-height-md: $kendo-chip-line-height !default;
 $kendo-chip-line-height-lg: $kendo-chip-line-height !default;
@@ -38,9 +38,24 @@ $kendo-chip-line-height-lg: $kendo-chip-line-height !default;
 /// Sizes map for the chip.
 /// @group chip
 $kendo-chip-sizes: (
-    sm: ( font-size: $kendo-chip-font-size-sm, line-height: $kendo-chip-line-height-sm, padding: $kendo-chip-padding-x-sm ),
-    md: ( font-size: $kendo-chip-font-size-md, line-height: $kendo-chip-line-height-md, padding: $kendo-chip-padding-x-md ),
-    lg: ( font-size: $kendo-chip-font-size-lg, line-height: $kendo-chip-line-height-lg, padding: $kendo-chip-padding-x-lg )
+    sm: (
+        padding-x: $kendo-chip-padding-x-sm,
+        padding-y: $kendo-chip-padding-y-sm,
+        font-size: $kendo-chip-font-size-sm,
+        line-height: $kendo-chip-line-height-sm
+    ),
+    md: (
+        padding-x: $kendo-chip-padding-x-md,
+        padding-y: $kendo-chip-padding-y-md,
+        font-size: $kendo-chip-font-size-md,
+        line-height: $kendo-chip-line-height-md
+    ),
+    lg: (
+        padding-x: $kendo-chip-padding-x-lg,
+        padding-y: $kendo-chip-padding-y-lg,
+        font-size: $kendo-chip-font-size-lg,
+        line-height: $kendo-chip-line-height-lg
+    )
 ) !default;
 
 /// The base background color of the chip.
@@ -121,7 +136,7 @@ $kendo-chip-outline-selected-text: $kendo-chip-outline-hover-text !default;
 // Chip List
 
 /// The sizes of the chip list.
-/// @group chip-list
+/// @group chip
 $kendo-chip-list-sizes: (
     sm: map-get( $spacing, 1 ),
     md: map-get( $spacing, 2 ),

package/scss/coloreditor/_variables.scss

@@ -18,9 +18,9 @@ $coloreditor-header-padding-y: $coloreditor-spacer !default;
 $coloreditor-header-padding-x: $coloreditor-header-padding-y !default;
 $coloreditor-header-actions-gap: ( $coloreditor-spacer / 2 ) !default;
 
-$coloreditor-preview-gap: 2px !default;
-$coloreditor-color-preview-width: 34px !default;
-$coloreditor-color-preview-height: 14px !default;
+$coloreditor-preview-gap: map-get( $spacing, 1 ) !default;
+$coloreditor-color-preview-width: 32px !default;
+$coloreditor-color-preview-height: 12px !default;
 
 $coloreditor-views-padding-y: $coloreditor-spacer !default;
 $coloreditor-views-padding-x: $coloreditor-views-padding-y !default;

package/scss/combobox/_variables.scss

@@ -1,31 +1 @@
-// Comboboxes
-$combobox-select-padding-x: $kendo-button-padding-y !default;
-$combobox-select-padding-y: $kendo-button-padding-y !default;
-
-$combobox-bg: $kendo-input-bg !default;
-$combobox-text: $kendo-input-text !default;
-$combobox-border: $kendo-input-border !default;
-
-$combobox-hovered-bg: $kendo-input-hover-bg !default;
-$combobox-hovered-text: $kendo-input-hover-text !default;
-$combobox-hovered-border: $kendo-input-hover-border !default;
-
-$combobox-focused-bg: $kendo-input-focus-bg !default;
-$combobox-focused-text: $kendo-input-focus-text !default;
-$combobox-focused-border: $kendo-input-focus-border !default;
-$combobox-focused-shadow: $kendo-input-focus-shadow !default;
-
-$combobox-select-bg: $kendo-button-bg !default;
-$combobox-select-text: $kendo-button-text !default;
-$combobox-select-border: $kendo-button-border !default;
-$combobox-select-gradient: $kendo-button-gradient !default;
-
-$combobox-select-hovered-bg: $kendo-button-hover-bg !default;
-$combobox-select-hovered-text: $kendo-button-hover-text !default;
-$combobox-select-hovered-border: $kendo-button-hover-border !default;
-$combobox-select-hovered-gradient: $kendo-button-hover-gradient !default;
-
-$combobox-select-pressed-bg: $kendo-button-active-bg !default;
-$combobox-select-pressed-text: $kendo-button-active-text !default;
-$combobox-select-pressed-border: $kendo-button-active-border !default;
-$combobox-select-pressed-gradient: $kendo-button-active-gradient !default;
+// Combobox

package/scss/dataviz/_variables.scss

@@ -1,7 +1,7 @@
 // Chart
 /// The first base series color and its light and dark shades.
 /// @group charts
-$series-a: $teal !default;
+$series-a: $blue !default;
 $series-a-dark: mix(black, $series-a, 25%) !default;
 $series-a-darker: mix(black, $series-a, 50%) !default;
 $series-a-light: mix(white, $series-a, 25%) !default;
@@ -9,7 +9,7 @@ $series-a-lighter: mix(white, $series-a, 50%) !default;
 
 /// The second base series color and its light and dark shades.
 /// @group charts
-$series-b: $blue !default;
+$series-b: $purple !default;
 $series-b-dark: mix(black, $series-b, 25%) !default;
 $series-b-darker: mix(black, $series-b, 50%) !default;
 $series-b-light: mix(white, $series-b, 25%) !default;
@@ -17,7 +17,7 @@ $series-b-lighter: mix(white, $series-b, 50%) !default;
 
 /// The third base series color and its light and dark shades.
 /// @group charts
-$series-c: $purple !default;
+$series-c: $teal !default;
 $series-c-dark: mix(black, $series-c, 25%) !default;
 $series-c-darker: mix(black, $series-c, 50%) !default;
 $series-c-light: mix(white, $series-c, 25%) !default;
@@ -25,7 +25,7 @@ $series-c-lighter: mix(white, $series-c, 50%) !default;
 
 /// The fourth base series color and its light and dark shades.
 /// @group charts
-$series-d: $red !default;
+$series-d: $green !default;
 $series-d-dark: mix(black, $series-d, 25%) !default;
 $series-d-darker: mix(black, $series-d, 50%) !default;
 $series-d-light: mix(white, $series-d, 25%) !default;
@@ -41,7 +41,7 @@ $series-e-lighter: mix(white, $series-e, 50%) !default;
 
 /// The sixth base series color and its light and dark shades.
 /// @group charts
-$series-f: $green !default;
+$series-f: $red !default;
 $series-f-dark: mix(black, $series-f, 25%) !default;
 $series-f-darker: mix(black, $series-f, 50%) !default;
 $series-f-light: mix(white, $series-f, 25%) !default;

package/scss/fab/_theme.scss

@@ -1,11 +1,11 @@
 @include exports( "fab/theme/bootstrap" ) {
 
     // Normal state
-    @each $name, $color in $fab-theme-colors {
-        .k-fab-#{$name} {
-            @include box-shadow($fab-shadow);
-            outline: $fab-border-width solid $color;
-            outline-offset: -$fab-border-width;
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-fab-solid-#{$name} {
+            @include box-shadow($kendo-fab-shadow);
+            outline: $kendo-fab-border-width solid $color;
+            outline-offset: -$kendo-fab-border-width;
             border-color: $color;
             color: contrast-wcag( $color );
             background-color: $color;
@@ -13,10 +13,9 @@
     }
 
     // Hover state
-    @each $name, $color in $fab-theme-colors {
-        .k-state-hover.k-fab-#{$name},
-        .k-state-hovered.k-fab-#{$name},
-        .k-fab-#{$name}:hover {
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-hover.k-fab-solid-#{$name},
+        .k-fab-solid-#{$name}:hover {
             border-color: try-darken( $color, 10% );
             color: contrast-wcag( try-darken( $color, 7.5% ) );
             background-color: try-darken( $color, 7.5% );
@@ -24,10 +23,9 @@
     }
 
     // Focus state
-    @each $name, $color in $fab-theme-colors {
-        .k-fab-#{$name}.k-state-focus,
-        .k-fab-#{$name}.k-state-focused,
-        .k-fab-#{$name}:focus {
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-fab-solid-#{$name}.k-focus,
+        .k-fab-solid-#{$name}:focus {
             outline-style: solid;
             outline-width: 3px;
             outline-color: rgba( $color, .5 );
@@ -35,11 +33,11 @@
     }
 
     // Active state
-    @each $name, $color in $fab-theme-colors {
-        .k-state-active.k-fab-#{$name},
-        .k-state-selected.k-fab-#{$name},
-        .k-fab-#{$name}:active {
-            @include box-shadow($fab-active-shadow);
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-active.k-fab-solid-#{$name},
+        .k-selected.k-fab-solid-#{$name},
+        .k-fab-solid-#{$name}:active {
+            @include box-shadow($kendo-fab-active-shadow);
             border-color: try-darken( $color, 12.5% );
             color: contrast-wcag( try-darken( $color, 10% ) );
             background-color: try-darken( $color, 10% );
@@ -47,10 +45,10 @@
     }
 
     // Disabled state
-    @each $name, $color in $fab-theme-colors {
-        .k-state-disabled.k-fab-#{$name},
-        .k-fab-#{$name}:disabled {
-            @include box-shadow($fab-disabled-shadow);
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-disabled.k-fab-solid-#{$name},
+        .k-fab-solid-#{$name}:disabled {
+            @include box-shadow($kendo-fab-disabled-shadow);
             background-color: try-tint( $color, 4.5 );
             color: try-tint( contrast-wcag( $color ), 5 );
             opacity: 1;
@@ -60,68 +58,65 @@
     // Items
     .k-fab-item-text {
         @include fill(
-            $fab-item-text,
-            $fab-item-bg,
-            $fab-item-border
+            $kendo-fab-item-text,
+            $kendo-fab-item-bg,
+            $kendo-fab-item-border
         );
-        @include box-shadow($fab-item-shadow);
+        @include box-shadow($kendo-fab-item-shadow);
     }
     .k-fab-item-icon {
         @include fill(
-            $fab-item-icon-text,
-            $fab-item-icon-bg,
-            $fab-item-icon-border
+            $kendo-fab-item-icon-text,
+            $kendo-fab-item-icon-bg,
+            $kendo-fab-item-icon-border
         );
-        @include box-shadow($fab-item-shadow);
-        outline: $fab-border-width solid $kendo-button-bg;
-        outline-offset: -$fab-border-width;
+        @include box-shadow($kendo-fab-item-shadow);
+        outline: $kendo-fab-border-width solid $kendo-button-bg;
+        outline-offset: -$kendo-fab-border-width;
     }
 
     // Hover state
-    .k-fab-item.k-state-hover .k-fab-item-icon,
-    .k-fab-item.k-state-hovered .k-fab-item-icon,
+    .k-fab-item.k-hover .k-fab-item-icon,
     .k-fab-item:hover .k-fab-item-icon {
-        @include box-shadow($fab-item-shadow);
-        outline: $fab-border-width solid try-darken( $fab-item-icon-border, 10% );
-        outline-offset: -$fab-border-width;
-        border-color: try-darken( $fab-item-icon-border, 10% );
-        color: contrast-wcag( try-darken( $fab-item-icon-bg, 7.5% ) );
-        background-color: try-darken( $fab-item-icon-bg, 7.5% );
+        @include box-shadow($kendo-fab-item-shadow);
+        outline: $kendo-fab-border-width solid try-darken( $kendo-fab-item-icon-border, 10% );
+        outline-offset: -$kendo-fab-border-width;
+        border-color: try-darken( $kendo-fab-item-icon-border, 10% );
+        color: contrast-wcag( try-darken( $kendo-fab-item-icon-bg, 7.5% ) );
+        background-color: try-darken( $kendo-fab-item-icon-bg, 7.5% );
     }
 
     // Focus state
     .k-fab-item:focus .k-fab-item-text,
     .k-fab-item:focus .k-fab-item-icon,
-    .k-fab-item.k-state-focus .k-fab-item-text,
-    .k-fab-item.k-state-focus .k-fab-item-icon,
-    .k-fab-item.k-state-focused .k-fab-item-text,
-    .k-fab-item.k-state-focused .k-fab-item-icon {
+    .k-fab-item.k-focus .k-fab-item-text,
+    .k-fab-item.k-focus .k-fab-item-icon {
         outline-style: solid;
         outline-width: 3px;
-        outline-color: rgba( $fab-item-icon-border, .5 );
+        outline-color: rgba( $kendo-fab-item-icon-border, .5 );
     }
 
     // Active state
-    .k-fab-item.k-state-active .k-fab-item-icon,
+    .k-fab-item.k-active .k-fab-item-icon,
     .k-fab-item:active .k-fab-item-icon {
-        @include box-shadow($fab-item-active-shadow);
-        outline: $fab-border-width solid try-darken( $fab-item-icon-border, 12.5% );
-        outline-offset: -$fab-border-width;
-        border-color: try-darken( $fab-item-icon-border, 12.5% );
-        color: contrast-wcag( try-darken( $fab-item-icon-bg, 10% ) );
-        background-color: try-darken( $fab-item-icon-bg, 10% );
+        @include box-shadow($kendo-fab-item-active-shadow);
+        outline: $kendo-fab-border-width solid try-darken( $kendo-fab-item-icon-border, 12.5% );
+        outline-offset: -$kendo-fab-border-width;
+        border-color: try-darken( $kendo-fab-item-icon-border, 12.5% );
+        color: contrast-wcag( try-darken( $kendo-fab-item-icon-bg, 10% ) );
+        background-color: try-darken( $kendo-fab-item-icon-bg, 10% );
     }
 
     // Disabled state
-    .k-fab-item.k-state-disabled,
+    .k-fab-item.k-disabled,
     .k-fab-item:disabled {
         opacity: 1;
 
         .k-fab-item-text,
         .k-fab-item-icon {
-            @include box-shadow($fab-item-disabled-shadow);
-            background-color: try-tint( $fab-item-bg, 8 );
-            color: try-tint( $fab-item-text, 8 );
+            @include box-shadow($kendo-fab-item-disabled-shadow);
+            background-color: try-tint( $kendo-fab-item-bg, 8 );
+            color: try-tint( $kendo-fab-item-text, 8 );
         }
     }