@progress/kendo-theme-default 4.42.1-dev.2 → 5.0.0-alpha.2

package/scss/button/_theme.scss

@@ -1,140 +1,270 @@
 @include exports( "button/theme" ) {
 
-    // Default button
-    .k-button,
-    .k-button-secondary {
-        @include fill(
-            $button-text,
-            $button-bg,
-            $button-border,
-            $button-gradient
-        );
-        @include box-shadow( $button-shadow );
-
-        // Hover state
-        &:hover,
-        &.k-state-hover {
-            @include fill(
-                $button-hovered-text,
-                $button-hovered-bg,
-                $button-hovered-border,
-                $button-hovered-gradient
-            );
-            @include box-shadow( $button-hovered-shadow );
-        }
+    // Solid Buttons
+    @each $name, $color in $kendo-button-theme-colors {
+        .k-button-solid-#{$name} {
+            @if ($name == "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 box-shadow( $kendo-button-focus-shadow );
+                }
+
+                // 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 );
+                }
+            } @else {
+                color: contrast-wcag( $color );
+                background-color: $color;
+                border-color: $color;
+                background-image: linear-gradient( rgba( black, 0 ), rgba( black, .04 ) );
+
+                // Hover state
+                &:hover,
+                &.k-hover {
+                    background-color: try-shade( $color, .5 );
+                    border-color: $color;
+                }
+
+                // Focus state
+                &:focus,
+                &.k-focus {
+                    box-shadow: 0 0 0 2px rgba( $color, .3 );
+                }
+
+                // Active state
+                &:active,
+                &.k-active {
+                    background-color: try-shade( $color, 1.5 );
+                    border-color: try-shade( $color, 1.5 );
+                }
+
+                // Selected
+                &.k-selected {
+                    background-color: try-shade( $color, 1.5 );
+                    border-color: try-shade( $color, 1.5 );
+                }
+            }
 
-        // Focused state
-        &:focus,
-        &.k-state-focus,
-        &.k-state-focused {
-            @include box-shadow( $button-focused-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 );
+            }
         }
+    }
 
-        // Active state
-        &:active,
-        &.k-state-active {
-            @include fill(
-                $button-active-text,
-                $button-active-bg,
-                $button-active-border,
-                $button-active-gradient
-            );
-            @include box-shadow( $button-active-shadow );
-        }
 
-        // Selected state
-        &.k-state-selected {
-            @include fill(
-                $button-selected-text,
-                $button-selected-bg,
-                $button-selected-border,
-                $button-selected-gradient
-            );
-            @include box-shadow( $button-selected-shadow );
-        }
+    // Outline Buttons
+    .k-button-outline {
+        @include box-shadow( none );
+        border-color: currentColor;
+        background: none;
+    }
 
-        // 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 );
-        }
+    @each $name, $color in $kendo-button-theme-colors {
+        .k-button-outline-#{$name} {
+            @if ($name == "base") {
+                color: $kendo-button-text;
+
+                // Hover state
+                &:hover,
+                &.k-hover {
+                    @include fill(
+                        contrast-wcag( $kendo-button-text ),
+                        $kendo-button-text,
+                        $kendo-button-text
+                    );
+                }
+
+                // Focus state
+                &:focus,
+                &.k-focus {
+                    @include box-shadow( $kendo-button-focus-shadow );
+                }
+
+                // Active state
+                &:active,
+                &.k-active {
+                    @include fill(
+                        contrast-wcag( $kendo-button-text ),
+                        $kendo-button-text,
+                        $kendo-button-text
+                    );
+                }
+
+                // Selected state
+                &.k-selected {
+                    @include fill(
+                        contrast-wcag( $kendo-button-text ),
+                        $kendo-button-text,
+                        $kendo-button-text
+                    );
+                }
+            } @else {
+                color: $color;
+
+                // Hover state
+                &:hover,
+                &.k-hover {
+                    @include fill(
+                        contrast-wcag( $color ),
+                        $color,
+                        $color
+                    );
+                }
+
+                // Focus state
+                &:focus,
+                &.k-focus {
+                    box-shadow: 0 0 0 2px rgba( $color, .3 );
+                }
+
+                // Active state
+                &:active,
+                &.k-active {
+                    @include fill(
+                        contrast-wcag( $color ),
+                        $color,
+                        $color
+                    );
+                }
+
+                // Selected
+                &.k-selected {
+                    @include fill(
+                        contrast-wcag( $color ),
+                        $color,
+                        $color
+                    );
+                }
+            }
 
+            // 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 );
+            }
+        }
     }
 
 
-    // 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 );
-        }
+    // Flat Buttons
+    .k-button-flat {
+        @include box-shadow( none );
+        border-color: transparent;
+        background: none;
 
-        // Focused state
-        &:focus,
-        &.k-state-focus,
-        &.k-state-focused {
-            @include box-shadow( $primary-button-focused-shadow );
+        // Focus ring
+        &::after {
+            box-shadow: inset 0 0 0 2px currentColor;
         }
+    }
+    @each $name, $color in $kendo-button-theme-colors {
+        .k-button-flat-#{$name} {
+            @if ($name == "base") {
+                color: inherit;
+            } @else {
+                color: $color;
+            }
 
-        // 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 );
+            // 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 );
+            }
         }
+    }
 
-        // 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 );
-        }
+    // Link Buttons
+    .k-button-link {
+        @include box-shadow( none );
+        border-color: transparent;
+        background: none;
 
+        // Focus ring
+        &::after {
+            box-shadow: inset 0 0 0 2px currentColor;
+        }
     }
-    .k-button.k-primary {
-        @extend .k-button-primary;
+    @each $name, $color in $kendo-button-theme-colors {
+        .k-button-link-#{$name} {
+            @if ($name == "base") {
+                color: inherit;
+            } @else {
+                color: $color;
+            }
+
+            // 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 );
+            }
+        }
     }
 
 
@@ -146,12 +276,10 @@
     .k-button-group {
 
         .k-button:focus,
-        .k-button.k-state-focus,
-        .k-button.k-state-focused,
+        .k-button.k-focus,
         .k-button-outline:focus,
-        .k-button-outline.k-state-focus,
-        .k-button-outline.k-state-focused {
-            @include box-shadow( $button-group-focus-shadow );
+        .k-button-outline.k-focus {
+            @include box-shadow( $kendo-button-group-focus-shadow );
         }
 
     }
@@ -159,147 +287,8 @@
 
     // 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;
-
-        // Hover state
-        &:hover,
-        &.k-state-hover {
-            @include fill( contrast-wcag( $button-text ), $button-text, $button-text, none );
-        }
-
-        // Focused state
-        &:focus,
-        &.k-state-focus,
-        &.k-state-focused {
-            box-shadow: $button-focused-shadow;
-        }
-
-        // Active state
-        &:active,
-        &.k-state-active {
-            @include fill( contrast-wcag( $button-text ), $button-text, $button-text, none );
-        }
-
-        // Selected state
-        &.k-state-selected {
-            @include fill( contrast-wcag( $button-text ), $button-text, $button-text, none );
-        }
-    }
-    .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;
-        }
-    }
-
-}
-
-
-
-
-@include exports( "flat-button/theme" ) {
-
-    // Flat button
-    .k-button-flat {
-
-        &,
-        &:hover,
-        &.k-state-hover,
-        &:active,
-        &.k-state-active,
-        &:focus,
-        &.k-state-focus {
-            color: inherit;
-        }
-    }
-    .k-button-flat.k-primary {
-
-        &,
-        &:hover,
-        &.k-state-hover,
-        &:active,
-        &.k-state-active,
-        &:focus,
-        &.k-state-focus {
-            color: $primary;
-        }
-    }
-
-}
-
-
-
-
-@include exports( "clear-button/theme" ) {
-
-    .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;
-        }
-
-        &:focus,
-        &.k-state-focus,
-        &.k-state-focused,
-        &.k-state-focused:active {
-            &::after {
-                background-color: currentColor;
-                opacity: $clear-button-focused-opacity;
-                display: block;
-            }
-        }
-
+    .k-split-button.k-focus {
+        @include box-shadow( $kendo-button-focus-shadow );
     }
 
 }