@progress/kendo-theme-fluent 12.0.0-dev.1 → 12.0.0-dev.3

package/scss/breadcrumb/_variables.scss

@@ -51,41 +51,41 @@ $kendo-breadcrumb-lg-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the Breadcrumb
 /// @group breadcrumb
-$kendo-breadcrumb-bg: var( --kendo-breadcrumb-bg, k-color(surface-alt) ) !default;
+$kendo-breadcrumb-bg: var( --kendo-breadcrumb-bg, null ) !default;
 /// The text color of the Breadcrumb
 /// @group breadcrumb
-$kendo-breadcrumb-text: var( --kendo-breadcrumb-text, get-theme-color-var( neutral-130 ) ) !default;
+$kendo-breadcrumb-text: var( --kendo-breadcrumb-text, null ) !default;
 /// The border color of the Breadcrumb
 /// @group breadcrumb
-$kendo-breadcrumb-border: var( --kendo-breadcrumb-border, transparent ) !default;
+$kendo-breadcrumb-border: var( --kendo-breadcrumb-border, null ) !default;
 /// The box shadow of the focused breadcrumb
 /// @group breadcrumb
-$kendo-breadcrumb-focus-shadow: var( --kendo-breadcrumb-focus-shadow, 0 0 0 1px color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
+$kendo-breadcrumb-focus-shadow: var( --kendo-breadcrumb-focus-shadow, null ) !default;
 
 
 /// The horizontal padding of the small Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-x: var( --kendo-breadcrumb-link-padding-x, k-spacing(2) ) !default;
+$kendo-breadcrumb-sm-link-padding-x: var( --kendo-breadcrumb-link-padding-x, k-spacing(0.5) ) !default;
 /// The horizontal padding of the medium Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-md-link-padding-x: var( --kendo-breadcrumb-link-padding-x, k-spacing(2) ) !default;
+$kendo-breadcrumb-md-link-padding-x: var( --kendo-breadcrumb-link-padding-x, k-spacing(1.5) ) !default;
 /// The horizontal padding of the large Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-lg-link-padding-x: var( --kendo-breadcrumb-link-padding-x, k-spacing(2) ) !default;
 
 /// The vertical padding of the small Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-y: var( --kendo-breadcrumb-link-padding-y, k-spacing(1.5) )  !default;
+$kendo-breadcrumb-sm-link-padding-y: var( --kendo-breadcrumb-link-padding-y, k-spacing(0.5) )  !default;
 /// The vertical padding of the medium Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-md-link-padding-y: var( --kendo-breadcrumb-link-padding-y, k-spacing(2) ) !default;
+$kendo-breadcrumb-md-link-padding-y: var( --kendo-breadcrumb-link-padding-y, k-spacing(1.5) ) !default;
 /// The vertical padding of the large Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-y: var( --kendo-breadcrumb-link-padding-y, k-spacing(2.5) ) !default;
+$kendo-breadcrumb-lg-link-padding-y: var( --kendo-breadcrumb-link-padding-y, k-spacing(2) ) !default;
 
 /// The radius of the border around the Breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-border-radius: var( --kendo-breadcrumb-link-border-radius, 0px ) !default;
+$kendo-breadcrumb-link-border-radius: k-border-radius(md) !default;
 
 /// The initial text color of the Breadcrumb link
 /// @group breadcrumb
@@ -95,28 +95,28 @@ $kendo-breadcrumb-link-initial-text: var( --kendo-breadcrumb-link-initial-text,
 $kendo-breadcrumb-link-bg: var( --kendo-breadcrumb-link-bg, transparent ) !default;
 /// The text color of the Breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-text: var( --kendo-breadcrumb-link-text, get-theme-color-var( neutral-130 ) ) !default;
+$kendo-breadcrumb-link-text: var( --kendo-breadcrumb-link-text, k-color(on-app-surface) ) !default;
 /// The borer color of the Breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-border: var( --kendo-breadcrumb-link-border, transparent ) !default;
 /// The background color of the hovered breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-hover-bg: var( --kendo-breadcrumb-link-hover-bg, k-color(base-hover) ) !default;
+$kendo-breadcrumb-link-hover-bg: var( --kendo-breadcrumb-link-hover-bg, color-mix(in srgb, k-color(on-app-surface) 5%, transparent) ) !default;
 /// The text color of the hovered breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-hover-text: var( --kendo-breadcrumb-link-hover-text, k-color(on-app-surface) ) !default;
 /// The border color of the hovered breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-hover-border: var( --kendo-breadcrumb-link-hover-border, color-mix(in srgb, k-color(border) 10%, transparent) ) !default;
+$kendo-breadcrumb-link-hover-border: var( --kendo-breadcrumb-link-hover-border, color-mix(in srgb, k-color(on-app-surface) 5%, transparent) ) !default;
 /// The background color of the active breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-active-bg: var( --kendo-breadcrumb-link-active-bg, k-color(base-active) ) !default;
+$kendo-breadcrumb-link-active-bg: var( --kendo-breadcrumb-link-active-bg, color-mix(in srgb, k-color(on-app-surface) 12%, transparent) ) !default;
 /// The text color of the active breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-active-text: var( --kendo-breadcrumb-link-active-text, k-color(on-base) ) !default;
+$kendo-breadcrumb-link-active-text: var( --kendo-breadcrumb-link-active-text, k-color(on-app-surface) ) !default;
 /// The border color of the active breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-active-border: var( --kendo-breadcrumb-link-active-border, k-color(base-active) ) !default;
+$kendo-breadcrumb-link-active-border: var( --kendo-breadcrumb-link-active-border, color-mix(in srgb, k-color(on-app-surface) 12%, transparent) ) !default;
 /// The background color of the focused breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-focus-bg: var( --kendo-breadcrumb-link-focus-bg, transparent ) !default;
@@ -128,22 +128,19 @@ $kendo-breadcrumb-link-focus-text: var( --kendo-breadcrumb-link-focus-text, k-co
 $kendo-breadcrumb-link-focus-border: var( --kendo-breadcrumb-link-focus-border, null ) !default;
 /// The box shadow of the focused breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-focus-shadow: var( --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-breadcrumb-link-focus-hover-bg, k-color(base-hover) ) !default;
+$kendo-breadcrumb-link-focus-shadow: var( --kendo-breadcrumb-link-focus-shadow, inset 0 0 0 2px k-color(border-alt) ) !default;
 /// The background color of the disabled breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-disabled-bg: var( --kendo-breadcrumb-link-disabled-bg, none ) !default;
 /// The text color of the disabled breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-disabled-text: var( --kendo-breadcrumb-link-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
+$kendo-breadcrumb-link-disabled-text: var( --kendo-breadcrumb-link-disabled-text, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
 /// The border color of the disabled breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-disabled-border: var( --kendo-breadcrumb-link-disabled-border, none ) !default;
 /// The background color of selected the Breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-selected-bg: var( --kendo-breadcrumb-link-selected-bg, k-color(surface-alt) ) !default;
+$kendo-breadcrumb-link-selected-bg: var( --kendo-breadcrumb-link-selected-bg, transparent ) !default;
 /// The text color of the selected breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-selected-text: var( --kendo-breadcrumb-link-selected-text, k-color(on-app-surface) ) !default;
@@ -152,7 +149,7 @@ $kendo-breadcrumb-link-selected-text: var( --kendo-breadcrumb-link-selected-text
 $kendo-breadcrumb-link-selected-border: var( --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;
+$kendo-breadcrumb-link-selected-font-weight: var( --kendo-font-weight-semibold, 600 ) !default;
 
 /// The background color of the Breadcrumb root link
 /// @group breadcrumb
@@ -193,12 +190,15 @@ $kendo-breadcrumb-root-link-focus-border: var( --kendo-breadcrumb-root-link-focu
 /// The border color of the focused breadcrumb root link
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-shadow: var( --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: var( --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: var( --kendo-breadcrumb-root-link-disabled-text, $kendo-breadcrumb-link-disabled-text ) !default;
+/// The text color of the disabled breadcrumb root link
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-disabled-bg: var( --kendo-breadcrumb-root-link-disabled-bg, $kendo-breadcrumb-link-disabled-bg ) !default;
+/// The text color of the disabled breadcrumb root link
+/// @group breadcrumb
+$kendo-breadcrumb-root-link-disabled-border: var( --kendo-breadcrumb-root-link-disabled-border, $kendo-breadcrumb-link-disabled-border ) !default;
 
 /// The background color of the current Breadcrumb root link.
 /// @group breadcrumb
@@ -212,13 +212,13 @@ $kendo-breadcrumb-current-item-border: null  !default;
 
 /// The vertical padding of the small Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-icon-link-padding-y: var(--kendo-breadcrumb-sm-icon-link-padding-y, k-spacing(2) ) !default;
+$kendo-breadcrumb-sm-icon-link-padding-y: var(--kendo-breadcrumb-sm-icon-link-padding-y, k-spacing(0.5) ) !default;
 /// The vertical padding of the medium Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-md-icon-link-padding-y: var(--kendo-breadcrumb-md-icon-link-padding-y, k-spacing(2.5) ) !default;
+$kendo-breadcrumb-md-icon-link-padding-y: var(--kendo-breadcrumb-md-icon-link-padding-y, k-spacing(1.5) ) !default;
 /// The vertical padding of the large Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-icon-link-padding-y: var(--kendo-breadcrumb-lg-icon-link-padding-y, k-spacing(3) ) !default;
+$kendo-breadcrumb-lg-icon-link-padding-y: var(--kendo-breadcrumb-lg-icon-link-padding-y, k-spacing(2) ) !default;
 
 /// The horizontal padding of the small Breadcrumb link icon.
 /// @group breadcrumb
@@ -228,10 +228,10 @@ $kendo-breadcrumb-sm-icon-link-padding-x: var( --kendo-breadcrumb-icon-link-padd
 $kendo-breadcrumb-md-icon-link-padding-x: var( --kendo-breadcrumb-icon-link-padding-x, $kendo-breadcrumb-md-icon-link-padding-y ) !default;
 /// The horizontal padding of the large Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-icon-link-padding-x: var( --kendo-breadcrumb-icon-link-padding-x, $kendo-breadcrumb-lg-icon-link-padding-y ) !default;
+$kendo-breadcrumb-lg-icon-link-padding-x: var( --kendo-breadcrumb-icon-link-padding-x, k-spacing(2.5) ) !default;
 
 // Root link spacing
-$kendo-breadcrumb-link-icon-spacing: var( --kendo-icon-spacing, $kendo-icon-spacing ) !default;
+$kendo-breadcrumb-link-icon-spacing: k-spacing(0.5) !default;
 
 
 /// The sizes map for the Breadcrumb.

package/scss/bubble/_theme.scss

@@ -9,8 +9,8 @@
 
         &:focus,
         &.k-focus {
-            box-shadow: inset 0 0 0 #{$kendo-bubble-border-width} k-color(app-surface),
-                        inset 0 0 0 calc( #{$kendo-bubble-border-width} * 2 ) k-color(base-emphasis);
+            border-color: $kendo-bubble-focus-border;
+            box-shadow: $kendo-bubble-focus-shadow;
         }
     }
 }

package/scss/bubble/_variables.scss

@@ -52,10 +52,10 @@ $kendo-bubble-active-border: $kendo-bubble-active-bg !default;
 $kendo-bubble-focus-bg: k-color(base-subtle) !default;
 /// The border color of the focused Bubble.
 /// @group bubble
-$kendo-bubble-focus-border: $kendo-bubble-focus-bg !default;
+$kendo-bubble-focus-border: k-color(on-base) !default;
 /// The box shadow of the focused Bubble.
 /// @group bubble
-$kendo-bubble-focus-shadow: 0 0 0 2px color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
+$kendo-bubble-focus-shadow: inset 0 0 0 #{$kendo-bubble-border-width} k-color(on-base), inset 0 0 0 calc( #{$kendo-bubble-border-width} * 2 ) k-color(surface) !default;
 
 /// The spacing between content and icon in expandable Bubble.
 /// @group bubble

package/scss/button/_layout.scss

@@ -10,19 +10,11 @@
 
     // Button
     .k-button {
-
-        &:focus::after,
-        &.k-focus::after {
-            content: "";
-            display: block;
-            opacity: 1;
-            position: absolute;
-            border: medium none;
-            border-radius: 0;
-            inset: $kendo-button-focus-offset;
+        &:focus,
+        &.k-focus {
             outline-width: $kendo-button-focus-outline-width;
             outline-style: $kendo-button-focus-outline-style;
-            z-index: 1;
+            outline-offset: calc( (#{$kendo-button-border-width} * 2 ) * -1);
         }
 
         // Fix for focused button with full roundness
@@ -34,6 +26,10 @@
         }
     }
 
+    .k-button-sm {
+        font-weight: $kendo-font-weight-normal;
+    }
+
 
     // Sizing
     @each $size, $size-props in $kendo-button-sizes {
@@ -96,7 +92,6 @@
         &.k-focus::after {
             @include border-radius( inherit );
             inset: $kendo-button-flat-focus-offset;
-            outline-width: $kendo-button-flat-focus-outline-width;
             box-shadow: none;
         }
     }
@@ -115,10 +110,10 @@
             display: block;
             pointer-events: none;
             position: absolute;
-            left: calc(-1 * #{$kendo-button-border-width});
-            right: calc(-1 * #{$kendo-button-border-width});
-            top: calc(-1 * #{$kendo-button-border-width});
-            bottom: calc(-1 * #{$kendo-button-border-width});
+            inset-inline-start: calc(-1 * #{$kendo-button-border-width});
+            inset-inline-end: calc(-1 * #{$kendo-button-border-width});
+            inset-block-start: calc(-1 * #{$kendo-button-border-width});
+            inset-block-end: calc(-1 * #{$kendo-button-border-width});
             z-index: 0;
             transition: opacity .2s ease-in-out;
         }
@@ -127,7 +122,7 @@
         &:hover,
         &.k-hover {
             &::before {
-                opacity: .05;
+                opacity: .03;
             }
         }
 
@@ -139,7 +134,7 @@
             }
 
             &::after {
-                outline-color: currentColor !important; // stylelint-disable-line declaration-no-important
+                // outline-color: currentColor !important; // stylelint-disable-line declaration-no-important
                 opacity: .13;
             }
 
@@ -198,7 +193,7 @@
         &.k-focus::after {
             @include border-radius( inherit );
             inset: $kendo-button-link-focus-offset;
-            outline-width: $kendo-button-link-focus-outline-width;
+            // outline-width: $kendo-button-link-focus-outline-width;
         }
 
         &:focus,
@@ -213,7 +208,7 @@
         &:focus::after,
         &.k-focus::after {
             inset: auto;
-            outline-width: 0;
+            // outline-width: 0;
         }
     }
 }

package/scss/button/_theme.scss

@@ -6,138 +6,149 @@
 @mixin kendo-button--theme() {
 
     @include kendo-button--theme-base();
-
-    .k-button-solid-base {
-
+    .k-button-solid {
         &:focus,
         &.k-focus {
-            color: $kendo-button-focus-text;
-            background-color: $kendo-button-focus-bg;
             border-color: $kendo-button-focus-border;
-            outline-color: $kendo-button-focus-outline;
-
-            &:hover,
-            &.k-hover {
-                color: $kendo-button-focus-hover-text;
-                background-color: $kendo-button-focus-hover-bg;
-                border-color: $kendo-button-focus-hover-border;
-                outline-color: $kendo-button-focus-hover-outline;
-            }
-        }
-
-        &:active,
-        &.k-active {
-            color: $kendo-button-active-text;
-            background-color: $kendo-button-active-bg;
-            border-color: $kendo-button-active-border;
-
-            &:hover,
-            &.k-hover {
-                color: $kendo-button-active-hover-text;
-                background-color: $kendo-button-active-hover-bg;
-                border-color: $kendo-button-active-hover-border;
-            }
+            outline-color: $kendo-button-focus-border;
+            box-shadow: inset 0 0 0 $kendo-button-border-width $kendo-button-focus-border,
+                        inset 0 0 0 calc( #{$kendo-button-border-width} * 2 ) k-color(surface);
         }
+    }
 
+    .k-button-solid-base {
         &.k-selected {
             color: $kendo-button-active-text;
             background-color: $kendo-button-active-bg;
             border-color: $kendo-button-active-border;
-
-            &:hover,
-            &.k-hover {
-                color: $kendo-button-active-hover-text;
-                background-color: $kendo-button-active-hover-bg;
-                border-color: $kendo-button-active-hover-border;
-            }
         }
+    }
 
-        // Disabled state
+    .k-button-flat {
         &:disabled,
         &.k-disabled {
             @include fill(
-                $kendo-button-disabled-text,
-                $kendo-button-disabled-bg,
-                $kendo-button-disabled-border
+                $kendo-button-flat-disabled-text,
+                $kendo-button-flat-disabled-bg,
+                $kendo-button-flat-disabled-border
             );
         }
     }
 
-    .k-button-solid-warning,
-    .k-button-solid-light {
-        &:focus::after,
-        &.k-focus::after {
-            outline-color: k-color(app-surface);
+    .k-button-outline,
+    .k-button-flat,
+    .k-button-clear,
+    .k-button-link {
+        &:focus,
+        &.k-focus {
+            outline-color: $kendo-button-focus-border;
+        }
+
+        &:disabled,
+        &.k-disabled {
+            @include fill(
+                $kendo-button-outline-disabled-text,
+                $kendo-button-outline-disabled-bg,
+                $kendo-button-outline-disabled-border
+            );
         }
     }
 
     @each $theme-color, $color in $kendo-button-theme-colors {
         @if($theme-color != "base") {
             .k-button-flat-#{$theme-color} {
-                color: k-color(#{$theme-color}-on-surface);
                 background-color: initial !important; // stylelint-disable-line declaration-no-important
                 border-color: transparent;
+            }
+
+            .k-button-outline-#{$theme-color} {
+
+                border-color: k-color(#{$theme-color}-on-surface);
 
                 &:hover,
-                &.k-hover {
-                    color: k-color(#{$theme-color}-hover);
-                    background-color: k-color(#{$theme-color}-subtle) !important; // stylelint-disable-line declaration-no-important
-                    border-color: transparent;
+                &.k-hover,
+                &:active,
+                &.k-active,
+                &.k-selected {
+                    border-color: k-color(#{$theme-color}-on-surface);
                 }
+            }
 
-                &:focus,
-                &.k-focus {
+            .k-button-flat-#{$theme-color},
+            .k-button-outline-#{$theme-color} {
+                color: k-color(#{$theme-color}-on-surface);
+
+                &:active,
+                &.k-active,
+                &.k-selected {
+                    color: k-color(#{$theme-color}-on-surface);
+                    background-color: color-mix(in srgb, k-color(#{$theme-color}-active) 13%, transparent) !important; // stylelint-disable-line declaration-no-important
+                }
+
+                &:hover,
+                &.k-hover {
                     color: k-color(#{$theme-color}-on-surface);
-                    background-color: initial !important; // stylelint-disable-line declaration-no-important
-                    border-color: transparent;
-                    outline-color: k-color(#{$theme-color}-subtle-active);
-
-                    &:hover,
-                    &.k-hover {
-                        color: k-color(#{$theme-color}-hover);
-                        background-color: k-color(#{$theme-color}-subtle) !important; // stylelint-disable-line declaration-no-important
-                        border-color: transparent;
-                        outline-color: k-color(#{$theme-color}-subtle-active);
-                    }
-
-                    &::after {
-                        outline-color: k-color(#{$theme-color}-subtle-active);
-                    }
+                    background-color: color-mix(in srgb, k-color(#{$theme-color}-hover) 3%, transparent) !important; // stylelint-disable-line declaration-no-important
+                }
+            }
+        }
+
+        @if($theme-color == "base") {
+            .k-button-outline-#{$theme-color} {
+                border-color: $kendo-button-border;
+
+                &:hover,
+                &.k-hover {
+                    color: inherit;
+                    background-color: color-mix(in srgb, k-color(on-base) 3%, transparent);
+                    border-color: color-mix( in srgb, k-color(border) 34%, transparent );
                 }
 
                 &:active,
                 &.k-active,
                 &.k-selected {
-                    color: k-color(#{$theme-color}-hover);
-                    background-color: k-color(#{$theme-color}-subtle-hover) !important; // stylelint-disable-line declaration-no-important
-                    border-color: transparent;
-
-                    &:hover,
-                    &.k-hover {
-                        color: k-color(#{$theme-color}-hover);
-                        background-color: k-color(#{$theme-color}-subtle) !important; // stylelint-disable-line declaration-no-important
-                        border-color: transparent;
-                    }
+                    color: inherit;
+                    background-color: color-mix(in srgb, k-color(on-base) 13%, transparent);
+                    border-color: $kendo-button-border;
+                }
+            }
+
+            .k-button-flat-#{$theme-color} {
+                &:hover,
+                &.k-hover {
+                    background-color: color-mix(in srgb, k-color(on-base) 3%, transparent) !important; // stylelint-disable-line declaration-no-important
                 }
             }
         }
 
-        .k-button-clear-#{$theme-color} {
-            color: k-color(#{$theme-color}-on-surface);
-            background-color: transparent !important; // stylelint-disable-line declaration-no-important
-            border-color: transparent;
-            &:focus,
-            &.k-focus {
-                color: k-color(#{$theme-color}-on-surface);
-                background-color: k-color(#{$theme-color}-subtle) !important; // stylelint-disable-line declaration-no-important
-                border-color: transparent;
+        @if($theme-color == "secondary") {
+            .k-button-solid-#{$theme-color} {
+                border-color: currentColor;
+
+                &:hover,
+                &.k-hover,
+                &:active,
+                &.k-active,
+                &.k-selected {
+                    border-color: currentColor;
+                }
+
+                &:focus,
+                &.k-focus {
+                    box-shadow: inset 0 0 0 $kendo-button-border-width $kendo-button-focus-border;
+                }
             }
         }
 
-        .k-button-link-#{$theme-color} {
-            &:focus::after,
-            &.k-focus::after {
-                outline-color: k-color(#{$theme-color}-subtle-active);
+        @if($theme-color == "light") {
+            .k-button-outline-#{$theme-color},
+            .k-button-flat-#{$theme-color},
+            .k-button-clear-#{$theme-color},
+            .k-button-link-#{$theme-color} {
+                &:focus,
+                &.k-focus {
+                    outline-color: k-color(light-on-surface);
+                }
             }
         }
     }
@@ -171,9 +182,4 @@
             border-color: $kendo-button-flat-disabled-border;
         }
     }
-
-    .k-button-flat-base.k-disabled {
-        color: color-mix(in srgb, k-color(on-app-surface) 46%, transparent);
-    }
-
 }