@progress/kendo-theme-core 12.3.1-dev.8 → 13.0.0-dev.0

package/scss/components/button/_theme.scss

@@ -8,127 +8,60 @@
 
 @mixin kendo-button--theme-base() {
 
-    // Solid button
-    .k-button-solid-base {
-        @include fill(
-            $kendo-button-text,
-            $kendo-button-bg,
-            $kendo-button-border,
-            $kendo-button-gradient
-        );
-        @include box-shadow( $kendo-button-shadow );
-
-        // Hover state
-        &:hover,
-        &.k-hover {
-            @include fill(
-                $kendo-button-hover-text,
-                $kendo-button-hover-bg,
-                $kendo-button-hover-border,
-                $kendo-button-hover-gradient
-            );
-            @include box-shadow( $kendo-button-hover-shadow );
-        }
-
-        // Focus state
-        &:focus,
-        &.k-focus {
-            @include focus-indicator( $kendo-button-focus-shadow, true, true );
-        }
-
-        // Active state
-        &:active,
-        &.k-active {
-            @include fill(
-                $kendo-button-active-text,
-                $kendo-button-active-bg,
-                $kendo-button-active-border,
-                $kendo-button-active-gradient
-            );
-            @include box-shadow( $kendo-button-active-shadow );
-        }
-
-        // Selected state
-        &.k-selected {
-            @include fill(
-                $kendo-button-selected-text,
-                $kendo-button-selected-bg,
-                $kendo-button-selected-border,
-                $kendo-button-selected-gradient
-            );
-            @include box-shadow( $kendo-button-selected-shadow );
-        }
-
-        // Disabled state
-        &:disabled,
-        &.k-disabled {
-            @include fill(
-                $kendo-button-disabled-text,
-                $kendo-button-disabled-bg,
-                $kendo-button-disabled-border,
-                $kendo-button-disabled-gradient
-            );
-            @include box-shadow( $kendo-button-disabled-shadow );
-        }
-    }
-
-    @each $name, $color in $kendo-button-theme-colors {
-        @if ($name != "base") {
-            $_button-text: k-color(on-#{$name});
-            $_button-bg: k-color($name);
-            $_button-border: k-color($name);
+    .k-button {
 
-            $_button-hover-text: null;
-            $_button-hover-bg: k-color(#{$name}-hover);
-            $_button-hover-border: k-color(#{$name}-hover);
-
-            $_button-active-text: null;
-            $_button-active-bg: k-color(#{$name}-active);
-            $_button-active-border: k-color(#{$name}-active);
-
-            .k-button-solid-#{$name} {
+        // Solid button
+        #{k-when-default($kendo-button-default-fill-mode, "solid")}
+        &.k-button-solid {
+            #{k-when-default($kendo-button-default-theme-color, "base")}
+            &.k-button-base {
                 @include fill(
-                    $_button-text,
-                    $_button-bg,
-                    $_button-border,
-                    $kendo-solid-button-gradient
+                    $kendo-button-text,
+                    $kendo-button-bg,
+                    $kendo-button-border,
+                    $kendo-button-gradient
                 );
+                @include box-shadow( $kendo-button-shadow );
 
                 // Hover state
                 &:hover,
                 &.k-hover {
                     @include fill(
-                        $_button-hover-text,
-                        $_button-hover-bg,
-                        $_button-hover-border
+                        $kendo-button-hover-text,
+                        $kendo-button-hover-bg,
+                        $kendo-button-hover-border,
+                        $kendo-button-hover-gradient
                     );
+                    @include box-shadow( $kendo-button-hover-shadow );
                 }
 
                 // Focus state
                 &:focus,
                 &.k-focus {
-                    @if ( $kendo-solid-button-shadow ) {
-                        @include focus-indicator( 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread color-mix(in srgb, k-color($name) ( $kendo-solid-button-shadow-opacity * 100% ), transparent), true, true );
-                    }
+                    @include focus-indicator( $kendo-button-focus-shadow, true, true );
                 }
 
                 // Active state
                 &:active,
                 &.k-active {
                     @include fill(
-                        $_button-active-text,
-                        $_button-active-bg,
-                        $_button-active-border
+                        $kendo-button-active-text,
+                        $kendo-button-active-bg,
+                        $kendo-button-active-border,
+                        $kendo-button-active-gradient
                     );
+                    @include box-shadow( $kendo-button-active-shadow );
                 }
 
-                // Selected
+                // Selected state
                 &.k-selected {
                     @include fill(
-                        $_button-active-text,
-                        $_button-active-bg,
-                        $_button-active-border
+                        $kendo-button-selected-text,
+                        $kendo-button-selected-bg,
+                        $kendo-button-selected-border,
+                        $kendo-button-selected-gradient
                     );
+                    @include box-shadow( $kendo-button-selected-shadow );
                 }
 
                 // Disabled state
@@ -143,191 +76,314 @@
                     @include box-shadow( $kendo-button-disabled-shadow );
                 }
             }
+
+            @each $name in $kendo-button-theme-colors {
+                @if ($name != "base") {
+                    $_button-text: k-color(on-#{$name});
+                    $_button-bg: k-color(#{$name});
+                    $_button-border: k-color(#{$name});
+                    $_button-hover-text: null;
+                    $_button-hover-bg: k-color(#{$name}-hover);
+                    $_button-hover-border: k-color(#{$name}-hover);
+
+                    $_button-active-text: k-color(on-#{$name});
+                    $_button-active-bg: k-color(#{$name}-active);
+                    $_button-active-border: k-color(#{$name}-active);
+
+                    #{k-when-default($kendo-button-default-theme-color, $name)}
+                    &.k-button-#{$name} {
+                        @include fill(
+                            $_button-text,
+                            $_button-bg,
+                            $_button-border,
+                            $kendo-solid-button-gradient
+                        );
+
+                        // Hover state
+                        &:hover,
+                        &.k-hover {
+                            @include fill(
+                                $_button-hover-text,
+                                $_button-hover-bg,
+                                $_button-hover-border
+                            );
+                        }
+
+                        // Focus state
+                        &:focus,
+                        &.k-focus {
+                            @if ( $kendo-solid-button-shadow ) {
+                                @include focus-indicator( 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread color-mix(in srgb, k-color($name) ( $kendo-solid-button-shadow-opacity * 100% ), transparent), true, true );
+                            }
+                        }
+
+                        // Active state
+                        &:active,
+                        &.k-active {
+                            @include fill(
+                                $_button-active-text,
+                                $_button-active-bg,
+                                $_button-active-border
+                            );
+                        }
+
+                        // Selected
+                        &.k-selected {
+                            @include fill(
+                                $_button-active-text,
+                                $_button-active-bg,
+                                $_button-active-border
+                            );
+                        }
+
+                        // Disabled state
+                        &:disabled,
+                        &.k-disabled {
+                            @include fill(
+                                $kendo-button-disabled-text,
+                                $kendo-button-disabled-bg,
+                                $kendo-button-disabled-border,
+                                $kendo-button-disabled-gradient
+                            );
+                            @include box-shadow( $kendo-button-disabled-shadow );
+                        }
+                    }
+                }
+            }
         }
-    }
 
 
-    // Outline button
-    @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": k-color(on-app-surface) ) ) {
-        .k-button-outline-#{$name} {
-            @include box-shadow( none );
+        // Outline button
+        #{k-when-default($kendo-button-default-fill-mode, "outline")}
+        &.k-button-outline {
+            color: inherit;
             border-color: currentColor;
-            color: k-color(#{$name}-on-surface);
             background-color: transparent;
+            box-shadow: none;
 
-            // Hover state
-            &:hover,
-            &.k-hover {
-                @if $name == "base" {
-                    @include fill(
-                        k-color(base),
-                        k-color(on-base),
-                        k-color(on-base)
-                    );
-                } @else {
-                    @include fill(
-                        k-color(on-#{$name}),
-                        $color,
-                        $color
-                    );
-                }
+            &.k-focus,
+            &:focus {
+                box-shadow: none;
             }
 
-            // Focus state
-            &:focus,
-            &.k-focus {
-                @if $kendo-outline-button-shadow {
-                    @if $name == "base" {
-                        @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread color-mix(in srgb, k-color(on-app-surface ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), true, true );
-                    } @else {
-                        @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread color-mix(in srgb, k-color($name ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), true, true );
+            @each $name in $kendo-button-theme-colors {
+                #{k-when-default($kendo-button-default-theme-color, $name)}
+                &.k-button-#{$name} {
+                    color: k-color(#{$name}-on-surface);
+
+                    // Hover state
+                    &:hover,
+                    &.k-hover {
+                        @if $name == "base" {
+                            @include fill(
+                                k-color(base),
+                                k-color(on-base),
+                                k-color(on-base)
+                            );
+                        } @else {
+                            @include fill(
+                                k-color(on-#{$name}),
+                                k-color(#{$name}),
+                                k-color(#{$name})
+                            );
+                        }
                     }
-                }
-            }
 
-            // Active state
-            &:active,
-            &.k-active {
-                @if $name == "base" {
-                    @include fill(
-                        k-color(base ),
-                        k-color(on-base ),
-                        k-color(on-base )
-                    );
-                } @else {
-                    @include fill(
-                        k-color(on-#{$name} ),
-                        $color,
-                        $color
-                    );
-                }
-            }
+                    // Focus state
+                    &:focus,
+                    &.k-focus {
+                        @if $kendo-outline-button-shadow {
+                            @if $name == "base" {
+                                @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread color-mix(in srgb, k-color(on-app-surface ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), true, true );
+                            } @else {
+                                @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread color-mix(in srgb, k-color($name ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), true, true );
+                            }
+                        }
+                    }
 
-            // Selected
-            &.k-selected {
-                @if $name == "base" {
-                    @include fill(
-                        k-color(base ),
-                        k-color(on-base ),
-                        k-color(on-base )
-                    );
-                } @else {
-                    @include fill(
-                        k-color(on-#{$name} ),
-                        $color,
-                        $color
-                    );
-                }
-            }
+                    // Active state
+                    &:active,
+                    &.k-active {
+                        @if $name == "base" {
+                            @include fill(
+                                k-color(base ),
+                                k-color(on-base ),
+                                k-color(on-base )
+                            );
+                        } @else {
+                            @include fill(
+                                k-color(on-#{$name} ),
+                                k-color(#{$name}),
+                                k-color(#{$name})
+                            );
+                        }
+                    }
+
+                    // Selected
+                    &.k-selected {
+                        @if $name == "base" {
+                            @include fill(
+                                k-color(base ),
+                                k-color(on-base ),
+                                k-color(on-base )
+                            );
+                        } @else {
+                            @include fill(
+                                k-color(on-#{$name} ),
+                                k-color(#{$name} ),
+                                k-color(#{$name} )
+                            );
+                        }
+                    }
 
-            // Disabled state
-            &:disabled,
-            &.k-disabled {
-                color: $kendo-button-disabled-text;
+                    // Disabled state
+                    &:disabled,
+                    &.k-disabled {
+                        color: $kendo-button-disabled-text;
+                    }
+                }
             }
         }
-    }
 
 
-    // Flat button
-    @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": inherit ) ) {
-        .k-button-flat-#{$name} {
-            @if $name == "base" {
+        // Flat button
+        #{k-when-default($kendo-button-default-fill-mode, "flat")}
+        &.k-button-flat {
+            border-color: transparent !important; // stylelint-disable-line declaration-no-important
+            color: inherit;
+            background: none !important; // stylelint-disable-line declaration-no-important
+            box-shadow: none !important; // stylelint-disable-line declaration-no-important
+
+            &.k-selected {
                 color: inherit;
-            } @else {
-                color: k-color(#{$name}-on-surface);
             }
 
-            // Disabled state
-            &:disabled,
-            &.k-disabled {
-                color: $kendo-button-disabled-text;
+            @each $name in $kendo-button-theme-colors {
+                #{k-when-default($kendo-button-default-theme-color, $name)}
+                &.k-button-#{$name} {
+                    @if $name == "base" {
+                        color: inherit;
+                    } @else {
+                        color: k-color(#{$name}-on-surface);
+                    }
+
+                    // Disabled state
+                    &:disabled,
+                    &.k-disabled {
+                        color: $kendo-button-disabled-text;
+                    }
+                }
             }
         }
-    }
 
 
-    // Link button
-    @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": k-color(on-app-surface ) ) ) {
-        .k-button-link-#{$name} {
-            color: $color;
+        // Link button
+        #{k-when-default($kendo-button-default-fill-mode, "link")}
+        &.k-button-link {
+            border-color: transparent;
+            color: inherit;
+            background: none;
 
-            // Hover
-            &:hover,
-            &.k-hover {
-                @if $name == "base" {
-                    color: k-color(on-app-surface);
-                } @else {
-                    color: k-color(#{$name}-hover);
-                }
-            }
+            @each $name in $kendo-button-theme-colors {
+                #{k-when-default($kendo-button-default-theme-color, $name)}
+                &.k-button-#{$name} {
 
-            // Focus
-            &:focus,
-            &.k-focus {
-                @if ( $kendo-link-button-shadow ) {
                     @if $name == "base" {
-                        @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread color-mix(in srgb, k-color(on-app-surface ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), true, true );
+                        color: k-color(on-app-surface);
                     } @else {
-                        @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread color-mix(in srgb, k-color($name ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), true, true );
+                        color: k-color(#{$name});
                     }
-                }
-            }
 
-            // Active
-            &:active,
-            &.k-active {
-                @if $name == "base" {
-                    color: k-color(on-app-surface);
-                } @else {
-                    color: k-color(#{$name}-active);
-                }
-            }
+                    // Hover
+                    &:hover,
+                    &.k-hover {
+                        background-color: transparent;
+                        border-color: transparent;
+
+                        @if $name == "base" {
+                            color: k-color(on-app-surface);
+                        } @else {
+                            color: k-color(#{$name}-hover);
+                        }
+                    }
 
-            // Selected
-            &.k-selected {
-                @if $name == "base" {
-                    color: k-color(on-app-surface);
-                } @else {
-                    color: k-color(#{$name}-active);
-                }
-            }
+                    // Focus
+                    &:focus,
+                    &.k-focus {
+                        @if ( $kendo-link-button-shadow ) {
+                            @if $name == "base" {
+                                @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread color-mix(in srgb, k-color(on-app-surface ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), true, true );
+                            } @else {
+                                @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread color-mix(in srgb, k-color($name ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), true, true );
+                            }
+                        }
+                    }
 
-            // Disabled state
-            &:disabled,
-            &.k-disabled {
-                color: $kendo-button-disabled-text;
-            }
-        }
-    }
+                    // Active
+                    &:active,
+                    &.k-active {
+                        background-color: transparent;
+                        border-color: transparent;
+
+                        @if $name == "base" {
+                            color: k-color(on-app-surface);
+                        } @else {
+                            color: k-color(#{$name}-active);
+                        }
+                    }
 
+                    // Selected
+                    &.k-selected {
+                        background-color: transparent;
+                        border-color: transparent;
 
-    // Clear button
-    @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": k-color(on-app-surface ) ) ) {
-        .k-button-clear-#{$name} {
-            color: k-color(#{$name}-on-surface);
+                        @if $name == "base" {
+                            color: k-color(on-app-surface);
+                        } @else {
+                            color: k-color(#{$name}-active);
+                        }
+                    }
 
-            &:focus,
-            &.k-focus,
-            &:active {
-                &::after {
-                    background-color: currentColor;
-                    opacity: $kendo-clear-button-focus-opacity;
-                    display: block;
+                    // Disabled state
+                    &:disabled,
+                    &.k-disabled {
+                        color: $kendo-button-disabled-text;
+                    }
                 }
             }
-
-            // Disabled state
-            &:disabled,
-            &.k-disabled {
-                color: $kendo-button-disabled-text;
-            }
         }
-    }
 
 
-    // Button group
-    .k-button-group {}
-
+        // Clear button
+        #{k-when-default($kendo-button-default-fill-mode, "clear")}
+        &.k-button-clear {
+            border-color: transparent !important; // stylelint-disable-line declaration-no-important
+            color: inherit;
+            background: none !important; // stylelint-disable-line declaration-no-important
+            box-shadow: none !important; // stylelint-disable-line declaration-no-important
+
+            @each $name in $kendo-button-theme-colors {
+                #{k-when-default($kendo-button-default-theme-color, $name)}
+                &.k-button-#{$name} {
+                    color: k-color(#{$name}-on-surface);
+
+                    &:focus,
+                    &.k-focus,
+                    &:active {
+                        &::after {
+                            background-color: currentColor;
+                            opacity: $kendo-clear-button-focus-opacity;
+                            display: block;
+                        }
+                    }
 
+                    // Disabled state
+                    &:disabled,
+                    &.k-disabled {
+                        color: $kendo-button-disabled-text;
+                    }
+                }
+            }
+        }
+    }
 }

package/scss/components/button/_variables.scss

@@ -1,5 +1,10 @@
 // Button
 
+$kendo-button-default-theme-color: null !default;
+$kendo-button-default-fill-mode: null !default;
+$kendo-button-default-roundness: null !default;
+$kendo-button-default-size: null !default;
+
 $kendo-button-border-width: null !default;
 
 $kendo-button-border-radius: null !default;
@@ -34,10 +39,6 @@ $kendo-button-sm-inner-calc-size: null !default;
 $kendo-button-md-inner-calc-size: null !default;
 $kendo-button-lg-inner-calc-size: null !default;
 
-$kendo-button-sizes: null !default;
-
-$kendo-button-theme-colors: null !default;
-
 $kendo-button-bg: null !default;
 $kendo-button-text: null !default;
 $kendo-button-border: null !default;
@@ -101,3 +102,32 @@ $kendo-flat-button-selected-opacity: null !default;
 $kendo-flat-button-focus-ring-opacity: null !default;
 
 $kendo-button-transition: null !default;
+
+$kendo-button-roundness: ("none", "sm", "md", "lg", "full") !default;
+
+/// The theme colors map of the Button.
+/// @group button
+$kendo-button-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
+
+/// The sizes map of the Button.
+/// @group button
+$kendo-button-sizes: (
+    sm: (
+        padding-x: $kendo-button-sm-padding-x,
+        padding-y: $kendo-button-sm-padding-y,
+        font-size: $kendo-button-sm-font-size,
+        line-height: $kendo-button-sm-line-height
+    ),
+    md: (
+        padding-x: $kendo-button-md-padding-x,
+        padding-y: $kendo-button-md-padding-y,
+        font-size: $kendo-button-md-font-size,
+        line-height: $kendo-button-md-line-height
+    ),
+    lg: (
+        padding-x: $kendo-button-lg-padding-x,
+        padding-y: $kendo-button-lg-padding-y,
+        font-size: $kendo-button-lg-font-size,
+        line-height: $kendo-button-lg-line-height
+    )
+) !default;