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

package/scss/button/_theme.scss

@@ -2,170 +2,116 @@
 
 @include exports( "button/theme/material" ) {
 
-    // Flat button
-    .k-button-flat {
+    // Solid button
+    @each $name, $color in $kendo-button-theme-colors {
+        .k-button-solid-#{$name} {
+            @include box-shadow( $kendo-button-shadow );
+            color: if( $name == "base", $kendo-button-text, contrast-wcag( $color ) );
+            background-color: if( $name == "base", $kendo-button-bg, $color );
+            border-color: if( $name == "base", $kendo-button-bg, $color );
+
+            // Hover state
+            &:hover,
+            &.k-hover {
+                @include box-shadow( $kendo-button-hover-shadow );
+            }
 
-        &:disabled,
-        &.k-state-disabled {
-            color: $button-disabled-text;
-        }
-    }
-    .k-button-flat.k-primary {
-        color: $primary-button-bg;
+            // Focus state
+            &:focus,
+            &.k-focus {
+                @include box-shadow( $kendo-button-focus-shadow );
+            }
 
-        &:disabled,
-        &.k-state-disabled {
-            color: $button-disabled-text;
+            // Active state
+            &:active,
+            &.k-active {
+                @include box-shadow( $kendo-button-active-shadow );
+            }
+
+            // Selected state
+            &.k-selected {
+                @include box-shadow( $kendo-button-selected-shadow );
+            }
+
+            // Disabled state
+            &:disabled,
+            &.k-disabled {
+                @include box-shadow( $kendo-button-disabled-shadow );
+            }
         }
     }
 
 
     // Outline button
-    .k-button-outline {
-        @include box-shadow( none );
-        color: $button-text;
-
-        &:hover,
-        &.k-state-hover,
-        &:active,
-        &.k-state-active,
-        &.k-state-selected,
-        &:focus,
-        &.k-state-focus {
-            color: $button-text;
-        }
-
-        &:disabled,
-        &.k-state-disabled {
-            color: $button-disabled-text;
-        }
-    }
-    .k-button-outline.k-primary {
-        color: $primary-button-bg;
-
-        &:hover,
-        &.k-state-hover,
-        &:active,
-        &.k-state-active,
-        &.k-state-selected,
-        &:focus,
-        &.k-state-focus {
-            color: $primary-button-bg;
-        }
+    @each $name, $color in $kendo-button-theme-colors {
+        .k-button-outline-#{$name} {
+            color: if( $name == "base", $kendo-button-text, $color );
+
+            &:hover,
+            &.k-hover,
+            &:focus,
+            &.k-focus,
+            &:active,
+            &.k-active,
+            &.k-selected {
+                color: if( $name == "base", $kendo-button-text, $color );
+            }
 
-        &:disabled,
-        &.k-state-disabled {
-            color: $button-disabled-text;
+            // Disabled state
+            &:disabled,
+            &.k-disabled {
+                color: $kendo-button-disabled-text;
+            }
         }
     }
 
 
-    // Clear button
-    .k-button-clear,
-    .k-button.k-clear {
+    // Link button
+    @each $name, $color in $kendo-button-theme-colors {
+        .k-button-link-#{$name} {
 
-        &:disabled,
-        &.k-state-disabled {
-            color: $button-disabled-text;
+            // Disabled state
+            &:disabled,
+            &.k-disabled {
+                color: $kendo-button-disabled-text;
+            }
         }
     }
 
 
+    // Menu button
+    .k-menu-button {}
+
+
     // Button group
     .k-button-group {
-        @include box-shadow( $button-shadow );
+        @include box-shadow( $kendo-button-shadow );
 
         .k-button {
             @include box-shadow( none );
         }
 
+        // Disabled state
         &:disabled,
-        &.k-state-disabled {
+        &[disabled],
+        &.k-disabled {
             @include box-shadow( none );
-            opacity: 1;
         }
     }
 
 
     // Split button
-    .k-split-button {
-        @include box-shadow( $button-shadow );
-
-        .k-button {
-            @include box-shadow( none );
-        }
-
-        > .k-button:last-child,
-        > .k-split-button-arrow {
-            color: $subtle-text;
-        }
-
-        > .k-button:last-child:hover,
-        > .k-split-button-arrow:hover {
-            color: $button-text;
-        }
-
-        &:disabled,
-        &.k-state-disabled {
-            @include box-shadow( none );
-            opacity: 1;
-        }
-
-        &.k-flat {
-            @include box-shadow( none );
-        }
+    .k-split-button:focus,
+    .k-split-button.k-focus {
+        // @include box-shadow( $kendo-button-focus-shadow );
     }
 
 
     // Variant button group
     .k-button-group-flat,
-    .k-button-group-bare,
+    .k-button-group-link,
     .k-button-group-outline {
         @include box-shadow( none );
     }
 
 }
-
-
-
-
-@include exports( "clear-button/theme" ) {
-    .k-button.k-button-clear {
-        border-color: transparent !important; // sass-lint:disable-line no-important
-        color: $clear-button-text;
-        background: none !important; // sass-lint:disable-line no-important
-        box-shadow: none !important; // sass-lint:disable-line no-important
-
-        &::after {
-            display: block;
-        }
-
-        &:hover,
-        &.k-state-hover,
-        &:active,
-        &.k-state-active,
-        &:focus,
-        &.k-state-focused {
-            color: $clear-button-hover-text;
-        }
-
-        &:active,
-        &.k-state-active {
-            &::after {
-                background: transparent;
-            }
-        }
-
-        &.k-state-focused,
-        &.k-state-focused:active {
-            &::after {
-                background-color: currentColor;
-                opacity: $clear-button-focused-opacity;
-            }
-        }
-
-        &.k-state-disabled {
-            color: $button-disabled-text;
-        }
-    }
-}

package/scss/button/_variables.scss

@@ -1,132 +1,204 @@
 // Button
 
-/// Width of border around buttons
-/// @group buttons
-$button-border-width: 0px !default;
-/// Border radius of buttons
-/// @group buttons
-$button-border-radius: $border-radius !default;
-
-/// Horizontal padding of buttons
-/// @group buttons
-$button-padding-x: $padding-x !default;
-/// Vertical padding of buttons
-/// @group buttons
-$button-padding-y: 8px !default;
-$button-font-family: $font-family !default;
-$button-font-size: $font-size !default;
-$button-line-height: (20 / 14) !default;
-
-$button-padding-x-sm: $button-padding-x / 2 !default;
-$button-padding-y-sm: $button-padding-y / 2 !default;
-$button-line-height-sm: (20 / 14) !default;
-
-$button-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} + #{$button-border-width * 2} ) !default;
-$button-inner-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} ) !default;
-
-/// The background of the buttons.
-/// @group buttons
-$button-bg: $base-bg !default;
-/// The text color of the buttons.
-/// @group buttons
-$button-text: $base-text !default;
-/// The border color of the buttons.
-/// @group buttons
-$button-border: $button-bg !default;
-/// The background gradient of the buttons.
-/// @group buttons
-$button-gradient: null !default;
-$button-shadow: $box-shadow-depth-2 !default;
-
-/// The background of hovered buttons.
-/// @group buttons
-$button-hovered-bg: null !default;
-/// The text color of hovered buttons.
-/// @group buttons
-$button-hovered-text: null !default;
-/// The border color of hovered buttons.
-/// @group buttons
-$button-hovered-border: null !default;
-/// The background gradient of hovered buttons.
-/// @group buttons
-$button-hovered-gradient: null !default;
-$button-hovered-shadow: null !default;
-
-/// The background color of active buttons.
-/// @group buttons
-$button-active-bg: null !default;
-/// The text color of active buttons.
-/// @group buttons
-$button-active-text: null !default;
-/// The border color of active buttons.
-/// @group buttons
-$button-active-border: null !default;
-/// The background gradient of active buttons.
-/// @group buttons
-$button-active-gradient: null !default;
-$button-active-shadow: $box-shadow-depth-3 !default;
-
-/// The background color of selected buttons.
-/// @group buttons
-$button-selected-bg: $button-active-bg !default;
-/// The text color of selected buttons.
-/// @group buttons
-$button-selected-text: $button-active-text !default;
-/// The border color of selected buttons.
-/// @group buttons
-$button-selected-border: $button-active-bg !default;
-/// The background gradient of selected buttons.
-/// @group buttons
-$button-selected-gradient: null !default;
-$button-selected-shadow: null !default;
-
-/// The shadow of focused buttons.
-/// @group buttons
-$button-focused-shadow: null !default;
-
-
-// Disabled button
-$button-disabled-bg: try-shade( $body-bg, 12% ) !default;
-$button-disabled-text: $disabled-text !default;
-$button-disabled-border: null !default;
-$button-disabled-gradient: null !default;
-$button-disabled-shadow: none !default;
-
-
-// Primary button
-$primary-button-bg: $primary !default;
-$primary-button-text: $primary-contrast !default;
-$primary-button-border: $primary-button-bg !default;
-$primary-button-gradient: null !default;
-$primary-button-shadow: null !default;
-
-$primary-button-hovered-bg: null !default;
-$primary-button-hovered-text: null !default;
-$primary-button-hovered-border: null !default;
-$primary-button-hovered-gradient: null !default;
-$primary-button-hovered-shadow: null !default;
-
-$primary-button-active-bg: null !default;
-$primary-button-active-text: null !default;
-$primary-button-active-border: null !default;
-$primary-button-active-gradient: null !default;
-$primary-button-active-shadow: null !default;
-
-$primary-button-selected-bg: $primary-button-active-bg !default;
-$primary-button-selected-text: $primary-button-active-text !default;
-$primary-button-selected-border: $primary-button-active-gradient !default;
-$primary-button-selected-gradient: null !default;
-$primary-button-selected-shadow: null !default;
-
-$primary-button-focused-shadow: null !default;
-
-$button-group-focus-shadow: null !default;
-
-$flat-button-hover-opacity: .08 !default;
-$flat-button-focus-opacity: .12 !default;
-$flat-button-active-opacity: .16 !default;
-$flat-button-selected-opacity: .22 !default;
-
-$clear-button-text: inherit !default;
-$clear-button-hover-text: inherit !default;
-$clear-button-focused-opacity: .155 !default; // equal to 10% of black
+/// Width of the border around the button.
+/// @group button
+$kendo-button-border-width: 1px !default;
+
+/// Border radius of the button.
+/// @group button
+$kendo-button-border-radius: null !default;
+
+/// Horizontal padding of the button.
+/// @group button
+$kendo-button-padding-x: map-get( $spacing, 4 ) !default;
+$kendo-button-padding-x-sm: map-get( $spacing, 4 ) !default;
+$kendo-button-padding-x-md: map-get( $spacing, 4 ) !default;
+$kendo-button-padding-x-lg: map-get( $spacing, 4 ) !default;
+
+/// Vertical padding of the button.
+/// @group button
+$kendo-button-padding-y: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
+$kendo-button-padding-y-md: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
+
+/// Font family of the button.
+/// @group button
+$kendo-button-font-family: $font-family !default;
+
+/// Font sizes of the button.
+/// @group button
+$kendo-button-font-size: $font-size-md !default;
+$kendo-button-font-size-sm: $font-size-md !default;
+$kendo-button-font-size-md: $font-size-md !default;
+$kendo-button-font-size-lg: $font-size-md !default;
+
+/// Line heights used along with $font-size.
+/// @group button
+$kendo-button-line-height: ( 20 / 14 ) !default;
+$kendo-button-line-height-sm: ( 20 / 14 ) !default;
+$kendo-button-line-height-md: ( 20 / 14 ) !default;
+$kendo-button-line-height-lg: ( 20 / 14 ) !default;
+
+/// Calculated height of the button.
+/// @group button
+$kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
+
+/// Calculated inner height of the button. Without the border width.
+/// @group button
+$kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
+
+$kendo-button-arrow-padding-x: map-get( $spacing, 1 ) !default;
+$kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
+
+/// Theme colors map for the button.
+/// @group button
+$kendo-button-theme-colors: map-merge(
+    $theme-colors,
+    ( "base": $base-bg )
+) !default;
+
+/// The base background of the button.
+/// @group button
+$kendo-button-bg: $base-bg !default;
+/// The base text color of the button.
+/// @group button
+$kendo-button-text: $base-text !default;
+/// The base border color of the button.
+/// @group button
+$kendo-button-border: $kendo-button-bg !default;
+/// The base background gradient of the button.
+/// @group button
+$kendo-button-gradient: null !default;
+/// The base shadow of the button.
+/// @group button
+$kendo-button-shadow: $box-shadow-depth-2 !default;
+
+/// The base background of hovered button.
+/// @group button
+$kendo-button-hover-bg: null !default;
+/// The base text color of hovered button.
+/// @group button
+$kendo-button-hover-text: null !default;
+/// The base border color of hovered button.
+/// @group button
+$kendo-button-hover-border: null !default;
+/// The base background gradient of hovered button.
+/// @group button
+$kendo-button-hover-gradient: null !default;
+/// The base shadow of hovered button.
+/// @group button
+$kendo-button-hover-shadow: null !default;
+
+/// The base background color of active button.
+/// @group button
+$kendo-button-active-bg: null !default;
+/// The base text color of active button.
+/// @group button
+$kendo-button-active-text: null !default;
+/// The base border color of active button.
+/// @group button
+$kendo-button-active-border: null !default;
+/// The base background gradient of active button.
+/// @group button
+$kendo-button-active-gradient: null !default;
+/// The base shadow of active button.
+/// @group button
+$kendo-button-active-shadow: $box-shadow-depth-3 !default;
+
+/// The base background color of selected button.
+/// @group button
+$kendo-button-selected-bg: $kendo-button-active-bg !default;
+/// The base text color of selected button.
+/// @group button
+$kendo-button-selected-text: $kendo-button-active-text !default;
+/// The base border color of selected button.
+/// @group button
+$kendo-button-selected-border: $kendo-button-active-bg !default;
+/// The base background gradient of selected button.
+/// @group button
+$kendo-button-selected-gradient: null !default;
+/// The base shadow of selected button.
+/// @group button
+$kendo-button-selected-shadow: null !default;
+
+/// The base background of focused button.
+/// @group button
+$kendo-button-focus-bg: null !default;
+/// The base text color of focused button.
+/// @group button
+$kendo-button-focus-text: null !default;
+/// The base border color of focused button.
+/// @group button
+$kendo-button-focus-border: null !default;
+/// The base background gradient of focused button.
+/// @group button
+$kendo-button-focus-gradient: null !default;
+/// The base shadow of focused buttons.
+/// @group button
+$kendo-button-focus-shadow: null !default;
+
+/// The base background color of disabled button.
+/// @group button
+$kendo-button-disabled-bg: try-shade( $body-bg, 12% ) !default;
+/// The base text color of disabled button.
+/// @group button
+$kendo-button-disabled-text: $disabled-text !default;
+/// The base border color of disabled button.
+/// @group button
+$kendo-button-disabled-border: $kendo-button-disabled-bg !default;
+/// The base background gradient of disabled button.
+/// @group button
+$kendo-button-disabled-gradient: null !default;
+/// The base shadow of disabled button.
+/// @group button
+$kendo-button-disabled-shadow: none !default;
+
+// Solid button
+$kendo-solid-button-gradient: null !default;
+$kendo-solid-button-shade-function: "try-shade";
+$kendo-solid-button-shade-text-amount: null !default;
+$kendo-solid-button-shade-bg-amount: 0 !default;
+$kendo-solid-button-shade-border-amount: 0 !default;
+$kendo-solid-button-hover-shade-text-amount: null !default;
+$kendo-solid-button-hover-shade-bg-amount: null !default;
+$kendo-solid-button-hover-shade-border-amount: null !default;
+$kendo-solid-button-active-shade-text-amount: null !default;
+$kendo-solid-button-active-shade-bg-amount: null !default;
+$kendo-solid-button-active-shade-border-amount: null !default;
+$kendo-solid-button-shadow: null !default;
+$kendo-solid-button-shadow-blur: null !default;
+$kendo-solid-button-shadow-spread: null !default;
+$kendo-solid-button-shadow-opacity: null !default;
+
+// Outline button
+$kendo-outline-button-shadow: null !default;
+$kendo-outline-button-shadow-blur: null !default;
+$kendo-outline-button-shadow-spread: null !default;
+$kendo-outline-button-shadow-opacity: null !default;
+
+// link button
+$kendo-link-button-shadow: null !default;
+$kendo-link-button-shadow-blur: null !default;
+$kendo-link-button-shadow-spread: null !default;
+$kendo-link-button-shadow-opacity: null !default;
+
+// Clear button
+$kendo-clear-button-focus-opacity: .155 !default; // equal to 10% of black
+
+/// The overlay opacity of hovered flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-hover-opacity: .08 !default;
+/// The overlay opacity of focused flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-focus-opacity: .12 !default;
+/// The overlay opacity of active flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-active-opacity: .16 !default;
+/// The overlay opacity of selected flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-selected-opacity: .22 !default;
+
+/// The transition of the button.
+/// @group button
+$kendo-button-transition: box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) !default;

package/scss/calendar/_index.scss

@@ -5,6 +5,7 @@
 @import "../common/_index.scss";
 @import "../button/_index.scss";
 @import "../icons/_index.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/scss/calendar/_variables.scss

@@ -87,7 +87,7 @@ $calendar-cell-selected-hover-text: $calendar-cell-selected-text !default;
 $calendar-cell-selected-hover-border: null !default;
 $calendar-cell-selected-hover-gradient: null !default;
 
-$calendar-cell-focused-shadow: $list-item-focused-shadow !default;
+$calendar-cell-focused-shadow: $kendo-list-item-focus-shadow !default;
 $calendar-cell-selected-focus-shadow: $calendar-cell-focused-shadow !default;
 
 

package/scss/chat/_variables.scss

@@ -32,13 +32,10 @@ $chat-bubble-border-radius-sm: 2px !default;
 $chat-avatar-size: 32px !default;
 $chat-avatar-spacing: $chat-item-spacing-x !default;
 
-$chat-message-box-padding-x: $chat-padding-x !default;
-$chat-message-box-padding-y: 10px !default;
-
-$chat-toolbar-padding-x: $chat-padding-x !default;
-$chat-toolbar-padding-y: 10px !default;
-$chat-toolbar-spacing: 20px !default;
-$chat-toolbar-bg: try-shade( $button-bg, .5 ) !default;
+$chat-toolbar-padding-x: $toolbar-padding-x !default;
+$chat-toolbar-padding-y: $toolbar-padding-y !default;
+$chat-toolbar-spacing: $toolbar-spacing !default;
+$chat-toolbar-bg: try-shade( $kendo-button-bg, .5 ) !default;
 $chat-toolbar-text: $toolbar-text !default;
 $chat-toolbar-border: inherit !default;
 
@@ -73,15 +70,3 @@ $chat-quick-reply-border: $primary !default;
 $chat-quick-reply-hover-bg: $primary !default;
 $chat-quick-reply-hover-text: $primary-contrast !default;
 $chat-quick-reply-hover-border: $primary !default;
-
-$chat-message-box-bg: $component-bg !default;
-$chat-message-box-text: $input-text !default;
-$chat-message-box-border: inherit !default;
-$chat-message-box-focus-shadow: 0 0 40px rgba( $input-text, .1 ) !default;
-
-$chat-message-box-button-hover-text: $primary !default;
-
-$chat-toolbar-box-button-hover-text: $primary !default;
-$chat-toolbar-box-button-hover-bg: none !default;
-
-$chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default;

package/scss/checkbox/_index.scss

@@ -2,6 +2,8 @@
 
 
 // Dependencies
+@import "../typography/_variables.scss";
+@import "../list/_variables.scss";
 
 
 // Component