@progress/kendo-theme-fluent 11.2.1-dev.0 → 11.3.0-dev.0

package/scss/button/_theme.scss

@@ -1,148 +1,143 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/button/_theme.scss" as *;
 
 @mixin kendo-button--theme() {
-    .k-button {
-        color: var( --kendo-button-text, inherit );
-        background-color: var( --kendo-button-bg, initial );
-        border-color: var( --kendo-button-border, initial );
-        background-image: linear-gradient(
-            var( --kendo-button-gradient, transparent, transparent )
-        );
-        box-shadow: var( --kendo-button-shadow, none );
-
-        &:hover,
-        &.k-hover {
-            color: var( --kendo-button-hover-text );
-            background-color: var( --kendo-button-hover-bg );
-            border-color: var( --kendo-button-hover-border );
-        }
+
+    @include kendo-button--theme-base();
+
+    .k-button-solid-base {
 
         &:focus,
         &.k-focus {
-            color: var( --kendo-button-focus-text );
-            background-color: var( --kendo-button-focus-bg );
-            border-color: var( --kendo-button-focus-border );
+            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: var( --kendo-button-focus-hover-text );
-                background-color: var( --kendo-button-focus-hover-bg );
-                border-color: var( --kendo-button-focus-hover-border );
+                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;
             }
         }
 
-        &:focus::after,
-        &.k-focus::after {
-            outline-color: var( --kendo-button-focus-outline, initial );
-        }
-
         &:active,
         &.k-active {
-            color: var( --kendo-button-active-text );
-            background-color: var( --kendo-button-active-bg );
-            border-color: var( --kendo-button-active-border );
+            color: $kendo-button-active-text;
+            background-color: $kendo-button-active-bg;
+            border-color: $kendo-button-active-border;
 
             &:hover,
             &.k-hover {
-                color: var( --kendo-button-active-hover-text );
-                background-color: var( --kendo-button-active-hover-bg );
-                border-color: var( --kendo-button-active-hover-border );
+                color: $kendo-button-active-hover-text;
+                background-color: $kendo-button-active-hover-bg;
+                border-color: $kendo-button-active-hover-border;
             }
         }
 
         &.k-selected {
-            color: var( --kendo-button-selected-text );
-            background-color: var( --kendo-button-selected-bg );
-            border-color: var( --kendo-button-selected-border );
+            color: $kendo-button-active-text;
+            background-color: $kendo-button-active-bg;
+            border-color: $kendo-button-active-border;
 
             &:hover,
             &.k-hover {
-                color: var( --kendo-button-selected-hover-text );
-                background-color: var( --kendo-button-selected-hover-bg );
-                border-color: var( --kendo-button-selected-hover-border );
+                color: $kendo-button-active-hover-text;
+                background-color: $kendo-button-active-hover-bg;
+                border-color: $kendo-button-active-hover-border;
             }
         }
+
+        // Disabled state
+        &:disabled,
+        &.k-disabled {
+            @include fill(
+                $kendo-button-disabled-text,
+                $kendo-button-disabled-bg,
+                $kendo-button-disabled-border
+            );
+        }
     }
 
-    .k-button:disabled,
-    .k-button.k-disabled,
-    .k-disabled .k-button,
-    :disabled .k-button {
-        color: var( --kendo-button-disabled-text );
-        background-color: var( --kendo-button-disabled-bg );
-        border-color: var( --kendo-button-disabled-border );
+    .k-button-solid-warning,
+    .k-button-solid-light {
+        &:focus::after,
+        &.k-focus::after {
+            outline-color: k-color(app-surface);
+        }
     }
 
-    @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} );
+    @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;
+
+                &: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;
+                }
+
+                &:focus,
+                &.k-focus {
+                    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);
+                    }
+                }
+
+                &: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;
+                    }
+                }
+            }
+        }
+
+        .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;
+            }
+        }
+
+        .k-button-link-#{$theme-color} {
+            &:focus::after,
+            &.k-focus::after {
+                outline-color: k-color(#{$theme-color}-subtle-active);
             }
         }
     }
@@ -153,6 +148,30 @@
         background-color: inherit;
     }
 
+    .k-disabled,
+    :disabled {
+
+        .k-button-solid {
+            color: $kendo-button-disabled-text;
+            background-color: $kendo-button-disabled-bg;
+            border-color: $kendo-button-disabled-border;
+        }
+
+        .k-button-outline {
+            color: $kendo-button-outline-disabled-text;
+            background-color: $kendo-button-outline-disabled-bg;
+            border-color: $kendo-button-outline-disabled-border;
+        }
+
+        .k-button-flat,
+        .k-button-clear,
+        .k-button-link {
+            color: $kendo-button-flat-disabled-text;
+            background-color: $kendo-button-flat-disabled-bg;
+            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);
     }