@progress/kendo-theme-default 5.0.0-next.4 → 5.0.2-dev.0

package/scss/button/_theme.scss

@@ -1,305 +1,289 @@
 @include exports( "button/theme" ) {
 
-    // Default button
-    .k-button,
-    .k-button-secondary {
+    // Solid button
+    .k-button-solid-base {
         @include fill(
-            $button-text,
-            $button-bg,
-            $button-border,
-            $button-gradient
+            $kendo-button-text,
+            $kendo-button-bg,
+            $kendo-button-border,
+            $kendo-button-gradient
         );
-        @include box-shadow( $button-shadow );
+        @include box-shadow( $kendo-button-shadow );
 
         // Hover state
         &:hover,
-        &.k-state-hover {
+        &.k-hover {
             @include fill(
-                $button-hovered-text,
-                $button-hovered-bg,
-                $button-hovered-border,
-                $button-hovered-gradient
+                $kendo-button-hover-text,
+                $kendo-button-hover-bg,
+                $kendo-button-hover-border,
+                $kendo-button-hover-gradient
             );
-            @include box-shadow( $button-hovered-shadow );
+            @include box-shadow( $kendo-button-hover-shadow );
         }
 
-        // Focused state
+        // Focus state
         &:focus,
-        &.k-state-focus,
-        &.k-state-focused {
-            @include box-shadow( $button-focused-shadow );
+        &.k-focus {
+            @include box-shadow( $kendo-button-focus-shadow );
         }
 
         // Active state
         &:active,
-        &.k-state-active {
+        &.k-active {
             @include fill(
-                $button-active-text,
-                $button-active-bg,
-                $button-active-border,
-                $button-active-gradient
+                $kendo-button-active-text,
+                $kendo-button-active-bg,
+                $kendo-button-active-border,
+                $kendo-button-active-gradient
             );
-            @include box-shadow( $button-active-shadow );
+            @include box-shadow( $kendo-button-active-shadow );
         }
 
         // Selected state
-        &.k-state-selected {
+        &.k-selected {
             @include fill(
-                $button-selected-text,
-                $button-selected-bg,
-                $button-selected-border,
-                $button-selected-gradient
+                $kendo-button-selected-text,
+                $kendo-button-selected-bg,
+                $kendo-button-selected-border,
+                $kendo-button-selected-gradient
             );
-            @include box-shadow( $button-selected-shadow );
+            @include box-shadow( $kendo-button-selected-shadow );
         }
 
         // Disabled state
         &:disabled,
-        &.k-state-disabled {
+        &.k-disabled {
             @include fill(
-                $button-disabled-text,
-                $button-disabled-bg,
-                $button-disabled-border,
-                $button-disabled-gradient
+                $kendo-button-disabled-text,
+                $kendo-button-disabled-bg,
+                $kendo-button-disabled-border,
+                $kendo-button-disabled-gradient
             );
-            @include box-shadow( $button-disabled-shadow );
+            @include box-shadow( $kendo-button-disabled-shadow );
         }
-
     }
 
-
-    // Primary button
-    .k-button-primary {
-        @include fill(
-            $primary-button-text,
-            $primary-button-bg,
-            $primary-button-border,
-            $primary-button-gradient
-        );
-        @include box-shadow( $primary-button-shadow );
-
-        // Hovoer state
-        &:hover,
-        &.k-state-hover {
-            @include fill(
-                $primary-button-hovered-text,
-                $primary-button-hovered-bg,
-                $primary-button-hovered-border,
-                $primary-button-hovered-gradient
-            );
-            @include box-shadow( $primary-button-hovered-shadow );
-        }
-
-        // Focused state
-        &:focus,
-        &.k-state-focus,
-        &.k-state-focused {
-            @include box-shadow( $primary-button-focused-shadow );
-        }
-
-        // Active state
-        &:active,
-        &.k-state-active {
-            @include fill(
-                $primary-button-active-text,
-                $primary-button-active-bg,
-                $primary-button-active-border,
-                $primary-button-active-gradient
-            );
-            @include box-shadow( $primary-button-active-shadow );
-        }
-
-        // Selected state
-        &.k-state-selected {
-            @include fill(
-                $primary-button-selected-text,
-                $primary-button-selected-bg,
-                $primary-button-selected-border,
-                $primary-button-selected-gradient
-            );
-            @include box-shadow( $primary-button-selected-shadow );
-        }
-
-        // Disabled state
-        &:disabled,
-        &.k-state-disabled {
-            @include fill(
-                $button-disabled-text,
-                $button-disabled-bg,
-                $button-disabled-border,
-                $button-disabled-gradient
-            );
-            @include box-shadow( $button-disabled-shadow );
-        }
-
-    }
-    .k-button.k-primary {
-        @extend .k-button-primary;
-    }
-
-
-    // Menu button
-    .k-menu-button {}
-
-
-    // Button group
-    .k-button-group {
-
-        .k-button:focus,
-        .k-button.k-state-focus,
-        .k-button.k-state-focused,
-        .k-button-outline:focus,
-        .k-button-outline.k-state-focus,
-        .k-button-outline.k-state-focused {
-            @include box-shadow( $button-group-focus-shadow );
+    $_shade-fn: get-function( $kendo-solid-button-shade-function );
+
+    @each $name, $color in $kendo-button-theme-colors {
+        @if ($name != "base") {
+            $_button-text: contrast-wcag( $color );
+            $_button-bg: if( $kendo-solid-button-shade-bg-amount, call( $_shade-fn, $color, $kendo-solid-button-shade-bg-amount ), null );
+            $_button-border: if( $kendo-solid-button-shade-border-amount, call( $_shade-fn, $color, $kendo-solid-button-shade-border-amount ), null );
+
+            $_button-hover-text: null;
+            $_button-hover-bg: if( $kendo-solid-button-hover-shade-bg-amount, call( $_shade-fn, $color, $kendo-solid-button-hover-shade-bg-amount ), null );
+            $_button-hover-border: if( $kendo-solid-button-hover-shade-border-amount, call( $_shade-fn, $color, $kendo-solid-button-hover-shade-border-amount ), null );
+
+            $_button-active-text: null;
+            $_button-active-bg: if( $kendo-solid-button-active-shade-bg-amount, call( $_shade-fn, $color, $kendo-solid-button-active-shade-bg-amount ), null );
+            $_button-active-border: if( $kendo-solid-button-active-shade-border-amount, call( $_shade-fn, $color, $kendo-solid-button-active-shade-border-amount ), null );
+
+            .k-button-solid-#{$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 ) {
+                        box-shadow: 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread rgba( $_button-border, $kendo-solid-button-shadow-opacity );
+                    }
+                }
+
+                // 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 );
+                }
+            }
         }
-
     }
 
 
-    // Split button
-    .k-split-button:focus,
-    .k-split-button.k-state-focus,
-    .k-split-button.k-state-focused {
-        @include box-shadow( $button-focused-shadow );
-    }
-
-}
-
-
-
-
-@include exports( "outline-button/theme" ) {
-
     // Outline button
-    .k-button-outline {
-        @include box-shadow( none );
-        border-color: currentColor;
-        color: $button-text;
-        background: none;
+    @each $name, $color in map-merge( $kendo-button-theme-colors, ( "base": $base-text ) ) {
+        .k-button-outline-#{$name} {
+            @include box-shadow( none );
+            border-color: currentColor;
+            color: $color;
+            background-color: transparent;
+
+            // Hover state
+            &:hover,
+            &.k-hover {
+                @include fill(
+                    contrast-wcag( $color ),
+                    $color,
+                    $color
+                );
+            }
 
-        // Hover state
-        &:hover,
-        &.k-state-hover {
-            @include fill( contrast-wcag( $button-text ), $button-text, $button-text, none );
-        }
+            // Focus state
+            &:focus,
+            &.k-focus {
+                @if $kendo-outline-button-shadow {
+                    box-shadow: 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread rgba( $color, $kendo-outline-button-shadow-opacity );
+                }
+            }
 
-        // Focused state
-        &:focus,
-        &.k-state-focus,
-        &.k-state-focused {
-            box-shadow: $button-focused-shadow;
-        }
+            // Active state
+            &:active,
+            &.k-active {
+                @include fill(
+                    contrast-wcag( $color ),
+                    $color,
+                    $color
+                );
+            }
 
-        // Active state
-        &:active,
-        &.k-state-active {
-            @include fill( contrast-wcag( $button-text ), $button-text, $button-text, none );
-        }
+            // Selected
+            &.k-selected {
+                @include fill(
+                    contrast-wcag( $color ),
+                    $color,
+                    $color
+                );
+            }
 
-        // Selected state
-        &.k-state-selected {
-            @include fill( contrast-wcag( $button-text ), $button-text, $button-text, none );
+            // Disabled state
+            &:disabled,
+            &.k-disabled {
+                color: $kendo-button-disabled-text;
+            }
         }
     }
-    .k-button-outline.k-primary {
-        border-color: currentColor;
-        color: $primary-button-bg;
-        background: none;
-        box-shadow: none;
 
-        // Hover state
-        &:hover,
-        &.k-state-hover {
-            @include fill( contrast-wcag( $primary-button-bg ), $primary-button-bg, $primary-button-bg, none );
-        }
 
-        // Focused state
-        &:focus,
-        &.k-state-focus,
-        &.k-state-focused {
-            box-shadow: $primary-button-focused-shadow;
-        }
-
-        // Actove state
-        &:active,
-        &.k-state-active {
-            @include fill( contrast-wcag( $primary-button-bg ), $primary-button-bg, $primary-button-bg, none );
-            box-shadow: none;
-        }
-
-        // Selected state
-        &.k-state-selected {
-            @include fill( contrast-wcag( $primary-button-bg ), $primary-button-bg, $primary-button-bg, none );
-            box-shadow: none;
+    // Flat button
+    @each $name, $color in map-merge( $kendo-button-theme-colors, ( "base": inherit ) ) {
+        .k-button-flat-#{$name} {
+            color: $color;
+
+            // Disabled state
+            &:disabled,
+            &.k-disabled {
+                color: $kendo-button-disabled-text;
+            }
         }
     }
 
-}
 
+    // Link button
+    @each $name, $color in map-merge( $kendo-button-theme-colors, ( "base": $base-text ) ) {
+        .k-button-link-#{$name} {
+            color: $color;
 
+            // Hover
+            &:hover,
+            &.k-hover {
+                color: try-shade( $color, 2 );
+            }
 
+            // Focus
+            &:focus,
+            &.k-focus {
+                @if ( $kendo-link-button-shadow ) {
+                    box-shadow: 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread rgba( $color, $kendo-link-button-shadow-opacity );
+                }
+            }
 
-@include exports( "flat-button/theme" ) {
+            // Active
+            &:active,
+            &.k-active {
+                color: try-shade( $color, 2 );
+            }
 
-    // Flat button
-    .k-button-flat {
+            // Selected
+            &.k-selected {
+                color: try-shade( $color, 2 );
+            }
 
-        &,
-        &:hover,
-        &.k-state-hover,
-        &:active,
-        &.k-state-active,
-        &:focus,
-        &.k-state-focus {
-            color: inherit;
+            // Disabled state
+            &:disabled,
+            &.k-disabled {
+                color: $kendo-button-disabled-text;
+            }
         }
     }
-    .k-button-flat.k-primary {
 
-        &,
-        &:hover,
-        &.k-state-hover,
-        &:active,
-        &.k-state-active,
-        &:focus,
-        &.k-state-focus {
-            color: $primary;
-        }
-    }
 
-}
+    // Clear button
+    @each $name, $color in map-merge( $kendo-button-theme-colors, ( "base": $base-text ) ) {
+        .k-button-clear-#{$name} {
+            color: $color;
 
+            &: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;
+            }
+        }
+    }
 
 
-@include exports( "clear-button/theme" ) {
+    // Menu button
+    .k-menu-button {}
 
-    .k-button-clear {
-        color: $clear-button-text;
 
-        &:hover,
-        &.k-state-hover,
-        &:active,
-        &.k-state-active,
-        &.k-state-selected,
-        &:focus,
-        &.k-state-focus,
-        &.k-state-focused {
-            color: $clear-button-hover-text;
-        }
+    // Button group
+    .k-button-group {}
 
-        &:focus,
-        &.k-state-focus,
-        &.k-state-focused,
-        &.k-state-focused:active {
-            &::after {
-                background-color: currentColor;
-                opacity: $clear-button-focused-opacity;
-                display: block;
-            }
-        }
 
+    // Split button
+    .k-split-button:focus,
+    .k-split-button.k-focus {
+        @include box-shadow( $kendo-button-focus-shadow );
     }
 
 }