@progress/kendo-theme-fluent 5.7.0

package/scss/breadcrumb/_variables.scss

@@ -0,0 +1,170 @@
+@use "../core/" as *;
+@use "../icon/_variables.scss" as *;
+
+/// The horizontal margin of the breadcrumb
+/// @group breadcrumb
+$kendo-breadcrumb-margin-x: 0px !default;
+/// The vertical margin of the breadcrumb
+/// @group breadcrumb
+$kendo-breadcrumb-margin-y: 0px !default;
+/// The horizontal padding of the breadcrumb
+/// @group breadcrumb
+$kendo-breadcrumb-padding-x: 0px !default;
+/// The vertical padding of the breadcrumb
+/// @group breadcrumb
+$kendo-breadcrumb-padding-y: 0px !default;
+/// The width of the border around the breadcrumb
+/// @group breadcrumb
+$kendo-breadcrumb-border-width: 0px !default;
+/// The font family of the breadcrumb
+/// @group breadcrumb
+$kendo-breadcrumb-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the breadcrumb
+/// @group breadcrumb
+$kendo-breadcrumb-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the breadcrumb
+/// @group breadcrumb
+$kendo-breadcrumb-line-height: var( --kendo-line-height, normal ) !default;
+/// The background color of the breadcrumb
+/// @group breadcrumb
+$kendo-breadcrumb-bg: var( --kendo-component-bg, initial ) !default;
+/// The text color of the breadcrumb
+/// @group breadcrumb
+$kendo-breadcrumb-text: get-theme-color-var( neutral-130 ) !default;
+/// The border color of the breadcrumb
+/// @group breadcrumb
+$kendo-breadcrumb-border: transparent !default;
+/// The box shadow of the focused breadcrumb
+/// @group breadcrumb
+$kendo-breadcrumb-focus-shadow: 0 0 0 1px get-theme-color-var( neutral-30 ) !default;
+
+/// The horizontal padding of the breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-padding-x: map-get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-padding-y: map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) !default;
+/// The radius of the border around the breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-border-radius: 0px !default;
+/// The initial text color of the breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-initial-text: inherit !default;
+/// The background color of the breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-bg: transparent !default;
+/// The text color of the breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-text: get-theme-color-var( neutral-130 ) !default;
+/// The borer color of the breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-border: transparent !default;
+/// The background color of the hovered breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-hover-bg: var( --kendo-hover-bg, initial ) !default;
+/// The text color of the hovered breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-hover-text: get-theme-color-var( neutral-160 ) !default;
+/// The border color of the hovered breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-hover-border: var( --kendo-hover-border, initial ) !default;
+/// The background color of the active breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-active-bg: var( --kendo-selected-bg, initial ) !default;
+/// The text color of the active breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-active-text: var( --kendo-selected-text, initial ) !default;
+/// The border color of the active breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-active-border: get-theme-color-var( neutral-30 ) !default;
+/// The background color of the focused breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-focus-bg: transparent !default;
+/// The text color of the focused breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-focus-text: get-theme-color-var( neutral-190 ) !default;
+/// The box shadow of the focused breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-focus-shadow: inset 0 0 0 1px get-theme-color-var( neutral-130 ) !default;
+/// The focus and hover background color of the breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-focus-hover-bg: var( --kendo-hover-bg, initial ) !default;
+/// The background color of the disabled breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-disabled-bg: none !default;
+/// The text color of the disabled breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-disabled-text: var( --kendo-disabled-text, initial ) !default;
+/// The border color of the disabled breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-disabled-border: none !default;
+/// The background color of selected the breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-selected-bg: var( --kendo-component-bg, initial ) !default;
+/// The text color of the selected breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-selected-text: get-theme-color-var( neutral-160 ) !default;
+/// The border color of the selected breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-selected-border: transparent !default;
+/// The font weight of the selected breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-selected-font-weight: var( --kendo-font-weight-bold, bold ) !default;
+
+/// The background color of the breadcrumb root link
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-bg: $kendo-breadcrumb-link-bg !default;
+/// The text color of the breadcrumb root link
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-text: $kendo-breadcrumb-link-text !default;
+/// The border color of the breadcrumb root link
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-border: $kendo-breadcrumb-link-border !default;
+/// The background color of the hovered breadcrumb root link
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-hover-bg: $kendo-breadcrumb-link-hover-bg !default;
+/// The text color of the hovered breadcrumb root link
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-hover-text: $kendo-breadcrumb-link-hover-text !default;
+/// The border color of the hovered breadcrumb root link
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-hover-border: $kendo-breadcrumb-link-hover-border !default;
+/// The background color of the active breadcrumb root link
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-active-bg: $kendo-breadcrumb-link-active-bg !default;
+/// The text color of the active breadcrumb root link
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-active-text: $kendo-breadcrumb-link-active-text !default;
+/// The border color of the active breadcrumb root link
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-active-border: $kendo-breadcrumb-link-active-border !default;
+/// The background color of the focused breadcrumb root link
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-focus-bg: $kendo-breadcrumb-link-focus-bg !default;
+/// The text color of the focused breadcrumb root link
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-focus-text: $kendo-breadcrumb-link-focus-text !default;
+/// The border color of the focused breadcrumb root link
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow !default;
+/// The focus and hover background color of the breadcrumb root link
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-focus-hover-bg: $kendo-breadcrumb-link-focus-hover-bg !default;
+/// The text color of the disabled breadcrumb root link
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-disabled-text: $kendo-breadcrumb-link-disabled-text !default;
+
+/// The horizontal padding of the breadcrumb link icon
+/// @group breadcrumb
+$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
+/// The vertical padding of the breadcrumb link icon
+/// @group breadcrumb
+$kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-x !default;
+
+/// The font size of the breadcrumb delimiter icon
+/// @group breadcrumb
+$kendo-breadcrumb-delimiter-icon-font-size: var( --kendo-font-size-sm, inherit ) !default;
+
+// Root link spacing
+$kendo-breadcrumb-root-link-spacing: 0px !default;
+$kendo-breadcrumb-link-icon-spacing: var( --kendo-icon-spacing, #{$kendo-icon-spacing} ) !default;

package/scss/breadcrumb/index.scss

@@ -0,0 +1,26 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "breadcrumb",
+    dependencies: (
+        "icon",
+        "input"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "breadcrumb" ) {
+        @include kendo-breadcrumb--layout();
+        @include kendo-breadcrumb--theme();
+    }
+}

package/scss/button/_layout.scss

@@ -0,0 +1,329 @@
+@use "../core" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-button--layout() {
+
+    // Button
+    .k-button {
+        padding-inline: var( --INTERNAL--kendo-button-padding-x, 0 );
+        padding-block: var( --INTERNAL--kendo-button-padding-y, 0 );
+        border-width: var( --kendo-button-border-width, #{$kendo-button-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        font-family: var( --kendo-button-font-family, #{$kendo-button-font-family} );
+        font-size: var( --INTERNAL--kendo-button-font-size, 1rem );
+        font-weight: var( --kendo-button-font-weight, #{$kendo-button-font-weight} );
+        line-height: var( --INTERNAL--kendo-button-line-height, normal );
+        text-align: center;
+        white-space: nowrap;
+        text-decoration: none;
+        vertical-align: middle;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        gap: var( --kendo-button-spacing, #{$kendo-button-spacing} );
+        position: relative;
+        cursor: pointer;
+        color: inherit;
+        background: none;
+        outline: none;
+        user-select: none;
+        -webkit-appearance: none;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        &::-moz-focus-inner {
+            padding: 0;
+            outline: 0;
+            border: 0;
+        }
+
+        &:hover,
+        &:focus {
+            outline: 0;
+            text-decoration: none;
+        }
+
+        &:focus::after,
+        &.k-focus::after {
+            content: "";
+            position: absolute;
+            border: medium none;
+            inset: var( --kendo-button-focus-offset, #{$kendo-button-focus-offset} );
+            outline-width: var( --kendo-button-focus-outline-width, #{$kendo-button-focus-outline-width} );
+            outline-style: var( --kendo-button-focus-outline-style, #{$kendo-button-focus-outline-style} );
+            z-index: 1;
+        }
+
+        // Fix for focused button with full roundness
+        &.k-rounded-full {
+            &:focus::after,
+            &.k-focus::after {
+               border-radius: inherit;
+            }
+        }
+    }
+
+
+    // Sizing
+    @each $size, $size-props in $kendo-button-sizes {
+        $_padding-x: map-get( $size-props, padding-x );
+        $_padding-y: map-get( $size-props, padding-y );
+        $_font-size: map-get( $size-props, font-size );
+        $_line-height: map-get( $size-props, line-height );
+
+        $_icon-button-padding: calc( $_padding-x / 2 );
+
+        .k-button-#{$size} {
+            --INTERNAL--kendo-button-padding-x: var( --kendo-button-#{$size}-padding-x, #{$_padding-x} );
+            --INTERNAL--kendo-button-padding-y: var( --kendo-button-#{$size}-padding-y, #{$_padding-y} );
+            --INTERNAL--kendo-button-font-size: var( --kendo-button-#{$size}-font-size, #{$_font-size} );
+            --INTERNAL--kendo-button-line-height: var( --kendo-button-#{$size}-line-height, #{$_line-height} );
+        }
+
+        .k-icon-button.k-button-#{$size} {
+            --INTERNAL--kendo-button-padding-x: var( --kendo-icon-button-#{$size}-padding-y, #{$_padding-y} );
+            --INTERNAL--kendo-button-padding-y: var( --kendo-icon-button-#{$size}-padding-y, #{$_padding-y} );
+
+            > .k-button-icon {
+                min-width: calc( #{$_font-size} * #{$_line-height} );
+                min-height: calc( #{$_font-size} * #{$_line-height} );
+            }
+        }
+    }
+
+    // Icon Button
+    .k-icon-button {
+        gap: 0;
+
+        .k-icon {
+            display: inline-flex;
+        }
+    }
+
+
+    // Content
+    .k-button-icon {
+        align-self: center;
+        position: relative;
+        color: inherit;
+    }
+
+
+    // Flat button
+    .k-button-flat {
+        color: inherit;
+        border-color: transparent !important; // sass-lint:disable-line no-important
+        box-shadow: none;
+
+        &:focus::after,
+        &.k-focus::after {
+            @include border-radius( inherit );
+            inset: var( --kendo-button-flat-focus-offset, #{$kendo-button-flat-focus-offset} );
+            outline-width: var( --kendo-button-flat-focus-outline-width, #{$kendo-button-flat-focus-outline-width} );
+        }
+    }
+
+    .k-button-flat-base {
+        color: inherit;
+        background: none !important;
+        border-color: transparent !important;
+
+        // Overlay
+        &::before {
+            @include border-radius( inherit );
+            content: "";
+            background: currentColor;
+            opacity: 0;
+            display: block;
+            pointer-events: none;
+            position: absolute;
+            left: -$kendo-button-border-width;
+            right: -$kendo-button-border-width;
+            top: -$kendo-button-border-width;
+            bottom: -$kendo-button-border-width;
+            z-index: 0;
+            transition: opacity .2s ease-in-out;
+        }
+
+        // Hovered state
+        &:hover,
+        &.k-hover {
+            &::before {
+                opacity: .05;
+            }
+        }
+
+        // Focused state
+        &:focus,
+        &.k-focus {
+            &::before {
+                opacity: 0;
+            }
+
+            &::after {
+                outline-color: currentColor !important;
+                opacity: .13;
+            }
+
+            // Focus and hovered state
+            &:hover,
+            &.k-hover {
+                &::before {
+                    opacity: .05;
+                }
+            }
+        }
+
+        &.k-no-focus:not(:hover),
+        &.k-no-focus:not(.k-hover) {
+            &::before {
+                opacity: 0;
+            }
+        }
+
+        // Active state
+        &:active,
+        &.k-active {
+            &::before {
+                opacity: .08;
+            }
+
+            // Active and hovered state
+            &:hover,
+            &.k-hover {
+                &::before {
+                    opacity: .05;
+                }
+            }
+        }
+
+        // Selected state
+        &.k-selected {
+            &::before {
+                opacity: .08;
+            }
+
+            // Selected and hovered state
+            &:hover,
+            &.k-hover {
+                &::before {
+                    opacity: .05;
+                }
+            }
+        }
+
+        &.k-disabled {
+            color: var( --kendo-disabled-text, inherit );
+        }
+    }
+
+
+    // Outline button
+    .k-button-outline {
+        color: inherit;
+        border-color: currentColor;
+        background: none;
+    }
+
+    // Link button
+    .k-button-link {
+        border-color: transparent !important; // sass-lint:disable-line no-important
+        text-decoration: none;
+        background: none;
+
+        &:focus::after,
+        &.k-focus::after {
+            @include border-radius( inherit );
+            inset: var( --kendo-button-link-focus-offset, #{$kendo-button-link-focus-offset} );
+            outline-width: var( --kendo-button-link-focus-outline-width, #{$kendo-button-link-focus-outline-width} );
+        }
+
+        &:hover,
+        &.k-hover,
+        &:focus,
+        &.k-focus {
+            text-decoration: underline;
+        }
+    }
+
+
+    // Clear button
+    .k-button-clear {
+        border-color: transparent !important; // sass-lint:disable-line no-important
+        color: inherit;
+        background: none;
+
+        &:focus::after,
+        &.k-focus::after {
+            inset: auto;
+            outline-width: 0;
+        }
+    }
+
+
+    // Button group
+    .k-button-group {
+        margin: 0;
+        padding: 0;
+        border-width: 0;
+        box-sizing: border-box;
+        list-style: none;
+        outline: 0;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        vertical-align: middle;
+        position: relative;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        > .k-button + .k-button {
+            margin-inline-start: if( $kendo-button-border-width == 0, null, -$kendo-button-border-width );
+        }
+
+        > .k-button:hover,
+        > .k-button.k-hover,
+        > .k-button:focus,
+        > .k-button.k-focus,
+        > .k-button:active,
+        > .k-button.k-active,
+        > .k-button.k-selected {
+            z-index: 2;
+        }
+
+        .k-button:not(:first-child):not(:last-child) {
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
+            border-start-start-radius: 0;
+            border-end-start-radius: 0;
+        }
+        > .k-button:first-child:not(:only-child) {
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
+        }
+        > .k-button:last-child:not(:only-child) {
+            border-start-start-radius: 0;
+            border-end-start-radius: 0;
+        }
+
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            opacity: 1;
+            filter: none;
+        }
+    }
+
+    .k-button-group-stretched {
+        width: 100%;
+
+        > * {
+            flex: 1 0 0%;
+            overflow: hidden;
+        }
+    }
+}

package/scss/button/_theme.scss

@@ -0,0 +1,155 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-button--theme() {
+    .k-button {
+        --INTERNAL--kendo-button-text: var( --kendo-button-text );
+        --INTERNAL--kendo-button-bg: var( --kendo-button-bg );
+        --INTERNAL--kendo-button-border: var( --kendo-button-border );
+        --INTERNAL--kendo-button-gradient: var( --kendo-button-gradient );
+        --INTERNAL--kendo-button-shadow: var( --kendo-button-shadow );
+
+        border-color: var( --INTERNAL--kendo-button-border, initial );
+        color: var( --INTERNAL--kendo-button-text, inherit );
+        background-color: var( --INTERNAL--kendo-button-bg, initial );
+        background-image: linear-gradient(
+            var( --INTERNAL--kendo-button-gradient, transparent, transparent )
+        );
+        box-shadow: var( --INTERNAL--kendo-button-shadow, none );
+
+        &:hover,
+        &.k-hover {
+            --INTERNAL--kendo-button-text: var( --kendo-button-hover-text );
+            --INTERNAL--kendo-button-bg: var( --kendo-button-hover-bg );
+            --INTERNAL--kendo-button-border: var( --kendo-button-hover-border );
+        }
+
+        &:focus,
+        &.k-focus {
+            --INTERNAL--kendo-button-text: var( --kendo-button-focus-text );
+            --INTERNAL--kendo-button-bg: var( --kendo-button-focus-bg );
+            --INTERNAL--kendo-button-border: var( --kendo-button-focus-border );
+
+            &:hover,
+            &.k-hover {
+                --INTERNAL--kendo-button-text: var( --kendo-button-focus-hover-text );
+                --INTERNAL--kendo-button-bg: var( --kendo-button-focus-hover-bg );
+                --INTERNAL--kendo-button-border: var( --kendo-button-focus-hover-border );
+            }
+        }
+
+        &:focus::after,
+        &.k-focus::after {
+            outline-color: var( --kendo-button-focus-outline, initial );
+        }
+
+        &:active,
+        &.k-active {
+            --INTERNAL--kendo-button-text: var( --kendo-button-active-text );
+            --INTERNAL--kendo-button-bg: var( --kendo-button-active-bg );
+            --INTERNAL--kendo-button-border: var( --kendo-button-active-border );
+
+            &:hover,
+            &.k-hover {
+                --INTERNAL--kendo-button-text: var( --kendo-button-active-hover-text );
+                --INTERNAL--kendo-button-bg: var( --kendo-button-active-hover-bg );
+                --INTERNAL--kendo-button-border: var( --kendo-button-active-hover-border );
+            }
+        }
+
+        &.k-selected {
+            --INTERNAL--kendo-button-text: var( --kendo-button-selected-text );
+            --INTERNAL--kendo-button-bg: var( --kendo-button-selected-bg );
+            --INTERNAL--kendo-button-border: var( --kendo-button-selected-border );
+
+            &:hover,
+            &.k-hover {
+                --INTERNAL--kendo-button-text: var( --kendo-button-selected-hover-text );
+                --INTERNAL--kendo-button-bg: var( --kendo-button-selected-hover-bg );
+                --INTERNAL--kendo-button-border: var( --kendo-button-selected-hover-border );
+            }
+        }
+
+        &:disabled,
+        &.k-disabled,
+        .k-disabled &,
+        :disabled & {
+            --INTERNAL--kendo-button-text: var( --kendo-button-disabled-text );
+            --INTERNAL--kendo-button-bg: var( --kendo-button-disabled-bg );
+            --INTERNAL--kendo-button-border: var( --kendo-button-disabled-border );
+        }
+    }
+
+    @each $fill-mode, $theme-colors in $kendo-button-theme-colors {
+        @each $theme-color, $color-props in $theme-colors {
+            $_text-color: map-get( $color-props, text );
+            $_bg: map-get( $color-props, bg );
+            $_border-color: map-get( $color-props, border );
+
+            $_focus-text: map-get( $color-props, focus-text );
+            $_focus-bg: map-get( $color-props, focus-bg );
+            $_focus-border: map-get( $color-props, focus-border );
+            $_focus-outline: map-get( $color-props, focus-outline );
+
+            $_focus-hover-text: map-get( $color-props, focus-hover-text );
+            $_focus-hover-bg: map-get( $color-props, focus-hover-bg );
+            $_focus-hover-border: map-get( $color-props, focus-hover-border );
+
+            $_hover-text: map-get( $color-props, hover-text );
+            $_hover-bg: map-get( $color-props, hover-bg );
+            $_hover-border: map-get( $color-props, hover-border );
+
+            $_active-text: map-get( $color-props, active-text );
+            $_active-bg: map-get( $color-props, active-bg );
+            $_active-border: map-get( $color-props, active-border );
+
+            $_active-hover-text: map-get( $color-props, active-hover-text );
+            $_active-hover-bg: map-get( $color-props, active-hover-bg );
+            $_active-hover-border: map-get( $color-props, active-hover-border );
+
+            $_disabled-text: map-get( $color-props, disabled-text );
+            $_disabled-bg: map-get( $color-props, disabled-bg );
+            $_disabled-border: map-get( $color-props, disabled-border );
+
+            .k-button-#{$fill-mode}-#{$theme-color} {
+                --kendo-button-text: var( --kendo-button-#{$fill-mode}-#{$theme-color}-text, #{$_text-color} );
+                --kendo-button-bg: var( --kendo-button-#{$fill-mode}-#{$theme-color}-bg, #{$_bg} );
+                --kendo-button-border: var( --kendo-button-#{$fill-mode}-#{$theme-color}-border, #{$_border-color} );
+
+                --kendo-button-hover-text: var( --kendo-button-#{$fill-mode}-#{$theme-color}-hover-text, #{$_hover-text} );
+                --kendo-button-hover-bg: var( --kendo-button-#{$fill-mode}-#{$theme-color}-hover-bg, #{$_hover-bg} );
+                --kendo-button-hover-border: var( --kendo-button-#{$fill-mode}-#{$theme-color}-hover-border, #{$_hover-border} );
+
+                --kendo-button-focus-text: var( --kendo-button-#{$fill-mode}-#{$theme-color}-focus-text, #{$_focus-text} );
+                --kendo-button-focus-bg: var( --kendo-button-#{$fill-mode}-#{$theme-color}-focus-bg, #{$_focus-bg} );
+                --kendo-button-focus-border: var( --kendo-button-#{$fill-mode}-#{$theme-color}-focus-border, #{$_focus-border} );
+                --kendo-button-focus-outline: var( --kendo-button-#{$fill-mode}-#{$theme-color}-focus-outline, #{$_focus-outline} );
+
+                --kendo-button-focus-hover-text: var( --kendo-button-#{$fill-mode}-#{$theme-color}-focus-hover-text, #{$_focus-hover-text} );
+                --kendo-button-focus-hover-bg: var( --kendo-button-#{$fill-mode}-#{$theme-color}-focus-hover-bg, #{$_focus-hover-bg} );
+                --kendo-button-focus-hover-border: var( --kendo-button-#{$fill-mode}-#{$theme-color}-focus-hover-border, #{$_focus-hover-border} );
+
+                --kendo-button-active-text: var( --kendo-button-#{$fill-mode}-#{$theme-color}-active-text, #{$_active-text} );
+                --kendo-button-active-bg: var( --kendo-button-#{$fill-mode}-#{$theme-color}-active-bg, #{$_active-bg} );
+                --kendo-button-active-border: var( --kendo-button-#{$fill-mode}-#{$theme-color}-active-border, #{$_active-border} );
+
+                --kendo-button-active-hover-text: var( --kendo-button-#{$fill-mode}-#{$theme-color}-active-hover-text, #{$_active-hover-text} );
+                --kendo-button-active-hover-bg: var( --kendo-button-#{$fill-mode}-#{$theme-color}-active-hover-bg, #{$_active-hover-bg} );
+                --kendo-button-active-hover-border: var( --kendo-button-#{$fill-mode}-#{$theme-color}-active-hover-border, #{$_active-hover-border} );
+
+                --kendo-button-selected-text: var( --kendo-button-#{$fill-mode}-#{$theme-color}-selected-text, #{$_active-text} );
+                --kendo-button-selected-bg: var( --kendo-button-#{$fill-mode}-#{$theme-color}-selected-bg, #{$_active-bg} );
+                --kendo-button-selected-border: var( --kendo-button-#{$fill-mode}-#{$theme-color}-selected-border, #{$_active-border} );
+
+                --kendo-button-selected-hover-text: var( --kendo-button-#{$fill-mode}-#{$theme-color}-selected-hover-text, #{$_active-hover-text} );
+                --kendo-button-selected-hover-bg: var( --kendo-button-#{$fill-mode}-#{$theme-color}-selected-hover-bg, #{$_active-hover-bg} );
+                --kendo-button-selected-hover-border: var( --kendo-button-#{$fill-mode}-#{$theme-color}-selected-hover-border, #{$_active-hover-border} );
+
+                --kendo-button-disabled-text: var( --kendo-button-#{$fill-mode}-#{$theme-color}-disabled-text, #{$_disabled-text} );
+                --kendo-button-disabled-bg: var( --kendo-button-#{$fill-mode}-#{$theme-color}-disabled-bg, #{$_disabled-bg} );
+                --kendo-button-disabled-border: var( --kendo-button-#{$fill-mode}-#{$theme-color}-disabled-border, #{$_disabled-border} );
+            }
+        }
+    }
+
+}