Skip to content

Commit

Permalink
feat(button): add size, shape and color customization to button
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: Convert monolithic button styles to multiple class names

Previously, `k-button` held all the styling information related to
the button component. Now, styles are split in multiple class names
with each being scoped to a single button appearance property:

* `shape` controls if the button is square or not;
* `size` controls the overall physical size of a button;
* `themeColor` controls which color is used to style a button;
* `fillMode` controls how the color is applied;
* `rounded` controls what border radius is applied to a button.

Each property generates component specific class name `k-button-square`,
`k-button-{size}`, `k-button-{fillMode}`, `k-button-{fillMode}-{themeColor}`.

Note: without `fillMode`, there is no way to apply themeColor, that's why
the `themeColor` class is composite.

The only notable exception is rounded, which sets the same class name
for all components -- `k-rounded-{rounded}`.

You can find more information about the values of each property in the
documentation of the button component -- /docs/components/button.

BREAKING CHANGE: Remove residual button styles

No further customization is applied to buttons when hosted inside other
components, except in very few specific cases.

For instance, in Material theme we would slightly dim the normal buttons
and remove the shadow, which may or may not be desired.

BREAKING CHANGE: Add kendo prefix to all button variables

Change variable names from `$button-*` to `$kendo-button-*`.
  • Loading branch information
@silviyaboteva @joneff
silviyaboteva authored and joneff committed Jan 18, 2022
1 parent 94e093b commit db31d3f
Show file tree
Hide file tree
Showing 99 changed files with 1,409 additions and 1,651 deletions.
2 changes: 1 addition & 1 deletion packages/bootstrap/scss/breadcrumb/_variables.scss
View file
Expand Up @@ -14,7 +14,7 @@ $breadcrumb-text: $component-text !default;
$breadcrumb-border: $component-border !default;

$breadcrumb-delimiter-icon-font-size: $icon-size * .75 !default;
$breadcrumb-delimiter-icon-padding-x: $button-padding-y !default;
$breadcrumb-delimiter-icon-padding-x: $kendo-button-padding-y !default;
$breadcrumb-delimiter-icon-padding-y: 0px !default;

$breadcrumb-link-padding-x: $padding-x-lg / 2 !default;
Expand Down
8 changes: 0 additions & 8 deletions packages/bootstrap/scss/button/_layout.scss
View file
@@ -1,9 +1 @@
@import "~@progress/kendo-theme-default/scss/button/_layout.scss";

@include exports("button/layout/bootstrap") {

// Default button
.k-button {
transition: $transition;
}
}
291 changes: 147 additions & 144 deletions packages/bootstrap/scss/button/_variables.scss
View file
Expand Up @@ -2,197 +2,200 @@

/// Width of the border around the button.
/// @group button
$button-border-width: $btn-border-width !default;
$kendo-button-border-width: $btn-border-width !default;

/// Border radius of the button.
/// @group button
$button-border-radius: $border-radius !default;
$kendo-button-border-radius: null !default;

/// Horizontal padding of the button.
/// @group button
$button-padding-x: $btn-padding-x !default;
$button-padding-x-sm: null !default;
$button-padding-x-md: null !default;
$button-padding-x-lg: null !default;
$kendo-button-padding-x: $btn-padding-x !default;
$kendo-button-padding-x-sm: $btn-padding-x-sm !default;
$kendo-button-padding-x-md: $btn-padding-x !default;
$kendo-button-padding-x-lg: $btn-padding-x-lg !default;

/// Vertical padding of the button.
/// @group button
$button-padding-y: $btn-padding-y !default;
$button-padding-y-sm: null !default;
$button-padding-y-md: null !default;
$button-padding-y-lg: null !default;
$kendo-button-padding-y: $btn-padding-y !default;
$kendo-button-padding-y-sm: $btn-padding-y-sm !default;
$kendo-button-padding-y-md: $btn-padding-y !default;
$kendo-button-padding-y-lg: $btn-padding-y-lg !default;

/// Font family of the button.
/// @group button
$button-font-family: $font-family !default;
$kendo-button-font-family: $font-family !default;

/// Font size of the button.
/// Font sizes of the button.
/// @group button
$button-font-size: $font-size !default;
$button-font-size-sm: null !default;
$button-font-size-md: null !default;
$button-font-size-lg: null !default;
$kendo-button-font-size: $btn-font-size !default;
$kendo-button-font-size-sm: $btn-font-size-sm !default;
$kendo-button-font-size-md: $btn-font-size !default;
$kendo-button-font-size-lg: $btn-font-size-lg !default;

/// Line height used along with $font-size.
/// Line heights used along with $font-size.
/// @group button
$button-line-height: $btn-line-height !default;
$button-line-height-sm: null !default;
$button-line-height-md: null !default;
$button-line-height-lg: null !default;
$kendo-button-line-height: $btn-line-height !default;
$kendo-button-line-height-sm: $btn-line-height !default;
$kendo-button-line-height-md: $btn-line-height !default;
$kendo-button-line-height-lg: $btn-line-height !default;

/// Calculated height of the button.
/// @group button
$button-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} + #{$button-border-width * 2} ) !default;
$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
$button-inner-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} ) !default;
$kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;

$button-arrow-padding-x: $button-padding-y !default;
$button-arrow-padding-y: $button-padding-y !default;
$kendo-button-arrow-padding-x: $kendo-button-padding-y !default;
$kendo-button-arrow-padding-y: $kendo-button-padding-y !default;

/// Theme colors map for the button.
/// @group button
$button-theme-colors: (
"primary": map-get( $theme-colors, primary ),
"secondary": map-get( $theme-colors, secondary ),
"tertiary": map-get( $theme-colors, tertiary ),
"info": map-get( $theme-colors, info ),
"success": map-get( $theme-colors, success ),
"warning": map-get( $theme-colors, warning ),
"error": map-get( $theme-colors, error ),
"dark": map-get( $theme-colors, dark ),
"light": map-get( $theme-colors, light ),
"inverse": map-get( $theme-colors, inverse )
$kendo-button-theme-colors: map-merge(
$theme-colors,
( "base": #e4e7eb )
) !default;

/// The background of the buttons.
/// The base background of the button.
/// @group button
$button-bg: #e4e7eb !default;
/// The text color of the buttons.
$kendo-button-bg: #e4e7eb !default;
/// The base text color of the button.
/// @group button
$button-text: contrast-wcag( $button-bg, $gray-900 ) !default;
/// The border color of the buttons.
$kendo-button-text: contrast-wcag( $kendo-button-bg, $gray-900 ) !default;
/// The base border color of the button.
/// @group button
$button-border: $button-bg !default;
/// The background gradient of the buttons.
$kendo-button-border: $kendo-button-bg !default;
/// The base background gradient of the button.
/// @group button
$button-gradient: null !default;
$button-shadow: null !default;
$kendo-button-gradient: null !default;
/// The base shadow of the button.
/// @group button
$kendo-button-shadow: null !default;

/// The background of hovered buttons.
/// The base background of hovered button.
/// @group button
$kendo-button-hover-bg: try-darken( $kendo-button-bg, 7.5% ) !default;
/// The base text color of hovered button.
/// @group button
$button-hovered-bg: try-darken( $button-bg, 7.5% ) !default;
/// The text color of hovered buttons.
$kendo-button-hover-text: null !default;
/// The base border color of hovered button.
/// @group button
$button-hovered-text: null !default;
/// The border color of hovered buttons.
$kendo-button-hover-border: try-darken( $kendo-button-bg, 10% ) !default;
/// The base background gradient of hovered button.
/// @group button
$button-hovered-border: try-darken( $button-bg, 10% ) !default;
/// The background gradient of hovered buttons.
$kendo-button-hover-gradient: null !default;
/// The base shadow of hovered button.
/// @group button
$button-hovered-gradient: null !default;
$button-hovered-shadow: null !default;
$kendo-button-hover-shadow: null !default;

/// The background color of active buttons.
/// The base background color of active button.
/// @group button
$button-active-bg: try-darken( $button-bg, 10% ) !default;
/// The text color of active buttons.
$kendo-button-active-bg: try-darken( $kendo-button-bg, 10% ) !default;
/// The base text color of active button.
/// @group button
$button-active-text: null !default;
/// The border color of active buttons.
$kendo-button-active-text: null !default;
/// The base border color of active button.
/// @group button
$button-active-border: try-darken( $button-bg, 12.5% ) !default;
/// The background gradient of active buttons.
$kendo-button-active-border: try-darken( $kendo-button-bg, 12.5% ) !default;
/// The base background gradient of active button.
/// @group button
$button-active-gradient: null !default;
$button-active-shadow: null !default;
$kendo-button-active-gradient: null !default;
/// The base shadow of active button.
/// @group button
$kendo-button-active-shadow: null !default;

/// The background color of selected buttons.
/// The base background color of selected button.
/// @group button
$button-selected-bg: try-darken( $primary, 10% ) !default;
$kendo-button-selected-bg: try-darken( $primary, 10% ) !default;
/// The text color of selected buttons.
/// @group button
$button-selected-text: contrast-wcag( $button-selected-bg ) !default;
$kendo-button-selected-text: contrast-wcag( $kendo-button-selected-bg ) !default;
/// The border color of selected buttons.
/// @group button
$button-selected-border: try-darken( $primary, 12.5% ) !default;
$kendo-button-selected-border: try-darken( $primary, 12.5% ) !default;
/// The background gradient of selected buttons.
/// @group button
$button-selected-gradient: null !default;
$button-selected-shadow: null !default;

/// The shadow of focused buttons.
/// @group button
$button-focused-shadow: 0 0 0 .25rem rgba( $button-border, .5 ) !default;


// Disabled button
$button-disabled-bg: null !default;
$button-disabled-text: null !default;
$button-disabled-border: null !default;
$button-disabled-gradient: null !default;
$button-disabled-shadow: null !default;


// Primary button
$primary-button-bg: $primary !default;
$primary-button-text: contrast-wcag( $primary-button-bg ) !default;
$primary-button-border: $primary-button-bg !default;
$primary-button-gradient: null !default;
$primary-button-shadow: null !default;

$primary-button-hovered-bg: try-darken( $primary-button-bg, 7.5% ) !default;
$primary-button-hovered-text: null !default;
$primary-button-hovered-border: try-darken( $primary-button-bg, 10% ) !default;
$primary-button-hovered-gradient: null !default;
$primary-button-hovered-shadow: null !default;

$primary-button-active-bg: try-darken( $primary-button-bg, 10% ) !default;
$primary-button-active-text: null !default;
$primary-button-active-border: try-darken( $primary-button-bg, 12.5% ) !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-border !default;
$primary-button-selected-gradient: null !default;
$primary-button-selected-shadow: null !default;

$primary-button-focused-shadow: 0 0 0 .25rem rgba( $primary-button-border, .5 ) !default;

$solid-button-gradient: null !default;
$solid-button-shade-function: "try-darken";
$solid-button-shade-text-amount: 0 !default;
$solid-button-shade-bg-amount: 0 !default;
$solid-button-shade-border-amount: 0 !default;
$solid-button-hover-shade-text-amount: null !default;
$solid-button-hover-shade-bg-amount: 7.5% !default;
$solid-button-hover-shade-border-amount: 10% !default;
$solid-button-active-shade-text-amount: null !default;
$solid-button-active-shade-bg-amount: 10% !default;
$solid-button-active-shade-border-amount: 12.5% !default;
$solid-button-shadow: true !default;
$solid-button-shadow-blur: 0px !default;
$solid-button-shadow-spread: .25rem !default;
$solid-button-shadow-opacity: .5 !default;

$outline-button-shadow: true !default;
$outline-button-shadow-blur: 0px !default;
$outline-button-shadow-spread: .25rem !default;
$outline-button-shadow-opacity: .5 !default;

$link-button-shadow: true !default;
$link-button-shadow-blur: 0px !default;
$link-button-shadow-spread: .25rem !default;
$link-button-shadow-opacity: .5 !default;

$flat-button-hover-opacity: .08 !default;
$flat-button-focus-opacity: null !default;
$flat-button-active-opacity: .16 !default;
$flat-button-selected-opacity: .2 !default;

$clear-button-text: inherit !default;
$clear-button-hover-text: inherit !default;
$clear-button-focused-opacity: .1 !default;
$kendo-button-selected-gradient: $kendo-button-active-gradient !default;
/// The base shadow of selected button.
/// @group button
$kendo-button-selected-shadow: $kendo-button-active-shadow !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 button.
/// @group button
$kendo-button-focus-shadow: 0 0 0 .25rem rgba( $kendo-button-border, .5 ) !default;

/// The base background of disabled button.
/// @group button
$kendo-button-disabled-bg: null !default;
/// The base text color of disabled button.
/// @group button
$kendo-button-disabled-text: null !default;
/// The base border color of disabled buttons.
/// @group button
$kendo-button-disabled-border: null !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: null !default;

// Solid button
$kendo-solid-button-gradient: null !default;
$kendo-solid-button-shade-function: "try-darken";
$kendo-solid-button-shade-text-amount: 0 !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: 7.5% !default;
$kendo-solid-button-hover-shade-border-amount: 10% !default;
$kendo-solid-button-active-shade-text-amount: null !default;
$kendo-solid-button-active-shade-bg-amount: 10% !default;
$kendo-solid-button-active-shade-border-amount: 12.5% !default;
$kendo-solid-button-shadow: true !default;
$kendo-solid-button-shadow-blur: 0px !default;
$kendo-solid-button-shadow-spread: .25rem !default;
$kendo-solid-button-shadow-opacity: .5 !default;

// Outline button
$kendo-outline-button-shadow: true !default;
$kendo-outline-button-shadow-blur: 0px !default;
$kendo-outline-button-shadow-spread: .25rem !default;
$kendo-outline-button-shadow-opacity: .5 !default;

// Link button
$kendo-link-button-shadow: true !default;
$kendo-link-button-shadow-blur: 0px !default;
$kendo-link-button-shadow-spread: .25rem !default;
$kendo-link-button-shadow-opacity: .5 !default;

/// 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: null !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: .2 !default;

/// The color transition of the button.
/// @group button
$kendo-button-transition: $transition !default;
4 changes: 2 additions & 2 deletions packages/bootstrap/scss/calendar/_variables.scss
View file
Expand Up @@ -87,8 +87,8 @@ $calendar-cell-selected-hover-text: $selected-hover-text !default;
$calendar-cell-selected-hover-border: $selected-hover-border !default;
$calendar-cell-selected-hover-gradient: null !default;

$calendar-cell-focused-shadow: inset $button-focused-shadow !default;
$calendar-cell-selected-focus-shadow: inset 0 0 0 2px rgba( $primary-button-active-border, .5 ) !default;
$calendar-cell-focused-shadow: inset $kendo-button-focus-shadow !default;
$calendar-cell-selected-focus-shadow: inset 0 0 0 2px rgba( try-darken( $primary, 12.5% ), .5 ) !default;


// Calendar navigation
Expand Down
2 changes: 1 addition & 1 deletion packages/bootstrap/scss/card/_variables.scss
View file
Expand Up @@ -62,7 +62,7 @@ $card-actions-border-width: 1px !default;
$card-actions-gap: map-get( $spacing, 2 ) !default;

$card-deck-scroll-button-radius: 0px !default;
$card-deck-scroll-button-offset: -$button-border-width !default;
$card-deck-scroll-button-offset: -$kendo-button-border-width !default;

$card-callout-width: 1.3em !default;
$card-callout-height: 1.3em !default;
Expand Down
4 changes: 2 additions & 2 deletions packages/bootstrap/scss/chat/_variables.scss
View file
Expand Up @@ -49,8 +49,8 @@ $chat-bg: $app-bg !default;
$chat-text: $app-text !default;
$chat-border: $app-border !default;

$chat-bubble-bg: $button-bg !default;
$chat-bubble-text: $button-text !default;
$chat-bubble-bg: $kendo-button-bg !default;
$chat-bubble-text: $kendo-button-text !default;
$chat-bubble-border: $chat-bubble-bg !default;
$chat-bubble-shadow: none !default;
$chat-bubble-hover-shadow: none !default;
Expand Down

0 comments on commit db31d3f

Please sign in to comment.