feat(button): Eva style (#1359)

BREAKING CHANGE:

'accent' property removed.

Static properties removed. Removed properties:
SIZE_XSMALL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE, STATUS_PRIMARY,
STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING, STATUS_DANGER,
SHAPE_RECTANGLE, SHAPE_ROUND, SHAPE_SEMI_ROUND.
Use NbComponentSize, NbComponentStatus, NbComponentShape.

Size classes were renamed:
btn-xsmall -> size-tiny
btn-small -> size-small
btn-medium -> size-medium
btn-large -> size-large

Size getter 'xsmall' renamed to tiny.

Status classes were renamed:
btn-primary -> status-primary
btn-info -> status-info
btn-success -> status-success
btn-warning -> status-warning
btn-danger -> status-danger

Shape classes were renamed:
btn-rectangle -> shape-rectangle
btn-round -> shape-round
btn-semi-round -> shape-semi-round

'btn-outline' class renamed to 'appearance-outline'.
'btn-hero' class renamed to 'appearance-hero'.

Button theme properties prefix changed to 'button' (was 'btn').

Following theme properties were renamed:
btn-fg -> button-filled-[status]-text-color,
button-outline-[status]-[state?]-text-color,
button-ghost-[status]-[state?]-text-color,
button-hero-[status]-text-color
btn-font-family -> button-text-font-family
btn-line-height -> button-[size]-text-line-height
btn-cursor -> button-cursor
btn-[status]-bg -> button-filled-[status]-background-color
btn-[status]-hover-bg -> button-filled-[status]-hover-background-color
btn-[status]-active-bg -> button-filled-[status]-active-background-color
btn-padding-y-[size], btn-padding-x-[size] -> button-[appearance]-[size]-padding
btn-font-size-[size] -> button-[size]-text-font-size
btn-rectangle-border-radius -> button-rectangle-border-radius
btn-semi-round-border-radius -> button-semi-round-border-radius
btn-round-border-radius -> button-round-border-radius
btn-hero-shadow -> button-hero-shadow
btn-hero-text-shadow -> button-hero-text-shadow
btn-hero-bevel-size -> button-hero-bevel-size
btn-hero-glow-size -> button-hero-glow-size
btn-hero-[status]-bevel-color -> button-hero-[status]-bevel-color
btn-hero-[status]-glow-color -> button-hero-[status]-glow-color
btn-hero-[status]-left-bg -> button-hero-[status]-left-background-color
btn-hero-[status]-right-bg -> button-hero-[status]-right-background-color
btn-hero-[status]-left-hover-bg -> button-hero-[status]-hover-left-background-color
btn-hero-[status]-right-hover-bg -> button-hero-[status]-hover-right-background-color
btn-hero-[status]-left-active-bg -> button-hero-[status]-active-left-background-color
btn-hero-[status]-right-active-bg -> button-hero-[status]-active-right-background-color
btn-outline-fg -> button-outline-[status]-border-color
btn-outline-hover-fg -> button-outline-[status]-hover-border-color
btn-outline-focus-fg -> button-outline-[status]-focus-border-color

Following theme properties were removed:
btn-group-bg
btn-group-fg
btn-group-separator
btn-disabled-opacity
btn-secondary-bg
btn-secondary-hover-bg
btn-secondary-active-bg
btn-secondary-border
btn-secondary-border-width
btn-hero-secondary-bevel-color
btn-hero-secondary-glow-color
btn-hero-border-radius

'btn-pulse' status renamed to 'button-pulse'.

'btn-full-width' renamed to 'full-width'.

src/app/playground-components.ts

@@ -180,6 +180,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
         component: 'ButtonIconComponent',
         name: 'Button Icon',
       },
+      {
+        path: 'button-interactive.component',
+        link: '/button/button-interactive.component',
+        component: 'ButtonInteractiveComponent',
+        name: 'Button Interactive',
+      },
     ],
   },
   {

src/framework/theme/components/button/_button-filled.scss

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@mixin button-filled() {
+  [nbButton].appearance-filled {
+    border-style: nb-theme(button-filled-border-style);
+    border-width: nb-theme(button-filled-border-width);
+    text-transform: nb-theme(button-filled-text-transform);
+
+    @each $size in nb-get-sizes() {
+      &.size-#{$size} {
+        padding: nb-theme(button-filled-#{$size}-padding);
+      }
+    }
+
+    @each $status in nb-get-statuses() {
+      &.status-#{$status} {
+        background-color: nb-theme(button-filled-#{$status}-background-color);
+        border-color: nb-theme(button-filled-#{$status}-border-color);
+        color: nb-theme(button-filled-#{$status}-text-color);
+
+        &:focus {
+          border-color: nb-theme(button-filled-#{$status}-focus-border-color);
+        }
+
+        &:hover {
+          background-color: nb-theme(button-filled-#{$status}-hover-background-color);
+          border-color: nb-theme(button-filled-#{$status}-hover-border-color);
+        }
+
+        &:active {
+          background-color: nb-theme(button-filled-#{$status}-active-background-color);
+          border-color: nb-theme(button-filled-#{$status}-active-border-color);
+        }
+
+        &[disabled] {
+          background-color: nb-theme(button-filled-#{$status}-disabled-background-color);
+          border-color: nb-theme(button-filled-#{$status}-disabled-border-color);
+        }
+      }
+    }
+  }
+}

src/framework/theme/components/button/_button-ghost.scss

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@mixin button-ghost() {
+  [nbButton].appearance-ghost {
+    background-color: nb-theme(button-ghost-background-color);
+    border-color: nb-theme(button-ghost-border-color);
+    border-style: nb-theme(button-ghost-border-style);
+    border-width: nb-theme(button-ghost-border-width);
+    text-transform: nb-theme(button-ghost-text-transform);
+
+    @each $size in nb-get-sizes() {
+      &.size-#{$size} {
+        padding: nb-theme(button-ghost-#{$size}-padding);
+      }
+    }
+
+    @each $status in nb-get-statuses() {
+      &.status-#{$status} {
+        color: nb-theme(button-ghost-#{$status}-text-color);
+
+        &:focus {
+          color: nb-theme(button-ghost-#{$status}-focus-text-color);
+        }
+
+        &:hover {
+          color: nb-theme(button-ghost-#{$status}-hover-color);
+        }
+
+        &:active {
+          color: nb-theme(button-ghost-#{$status}-active-text-color);
+        }
+
+        &[disabled] {
+          color: nb-theme(button-ghost-#{$status}-disabled-text-color);
+        }
+      }
+    }
+  }
+}