feat(sidebar): Eva theme (#1367)

BREAKING CHANGE:

Following theme properties were renamed:
sidebar-fg -> sidebar-text-color
sidebar-bg -> sidebar-background-color

src/framework/theme/components/sidebar/_sidebar.component.theme.scss

@@ -8,20 +8,24 @@
 
  nb-sidebar {
 
- font-size: nb-theme(sidebar-font-size);
- line-height: nb-theme(sidebar-line-height);
+ background-color: nb-theme(sidebar-background-color);
  box-shadow: nb-theme(sidebar-shadow);
+ color: nb-theme(sidebar-text-color);
+ font-family: nb-theme(sidebar-text-font-family);
+ font-size: nb-theme(sidebar-text-font-size);
+ font-weight: nb-theme(sidebar-text-font-weight);
+ line-height: nb-theme(sidebar-text-line-height);
+ width: nb-theme(sidebar-width);
 
  @include nb-scrollbars(
- nb-theme(scrollbar-fg),
- nb-theme(scrollbar-bg),
- nb-theme(scrollbar-width));
-
+ nb-theme(sidebar-scrollbar-color),
+ nb-theme(sidebar-scrollbar-background-color),
+ nb-theme(sidebar-scrollbar-width));
 
  .main-container {
+ background-color: nb-theme(sidebar-background-color);
  height: nb-theme(sidebar-height);
  width: nb-theme(sidebar-width);
- background: nb-theme(sidebar-bg);
  }
 
  .scrollable {
@@ -35,10 +39,6 @@
  }
  }
 
- width: nb-theme(sidebar-width);
- background: nb-theme(sidebar-bg);
- color: nb-theme(sidebar-fg);
-
  // TODO: width used to use transition on width
  &.collapsed {
  width: 0;
@@ -80,7 +80,7 @@
  top: 0;
  height: 100%;
  width: 4px;
- background: nb-theme(color-fg-highlight);
+ background: nb-theme(sidebar-menu-item-highlight-color);
  }
  }
 

src/framework/theme/components/sidebar/sidebar.component.ts

@@ -55,7 +55,7 @@ export class NbSidebarFooterComponent {
  * ```ts
  * @NgModule({
  * imports: [
- *  // ...
+ *  // ...
  * NbSidebarModule.forRoot(),
  * ],
  * })
@@ -65,7 +65,7 @@ export class NbSidebarFooterComponent {
  * ```ts
  * @NgModule({
  * imports: [
- *  // ...
+ *  // ...
  * NbSidebarModule,
  * ],
  * })
@@ -98,18 +98,23 @@ export class NbSidebarFooterComponent {
  *
  * @styles
  *
- * sidebar-font-size: Sidebar content font size
- * sidebar-line-height: Sidebar content line height
- * sidebar-fg: Foreground color
- * sidebar-bg: Background color
- * sidebar-height: Content height
- * sidebar-width: Expanded width
- * sidebar-width-compact: Compacted width
- * sidebar-padding: Sidebar content padding
- * sidebar-header-height: Sidebar header height
- * sidebar-footer-height: Sidebar footer height
- * sidebar-shadow: Sidebar container shadow
- *
+ * sidebar-background-color:
+ * sidebar-text-color:
+ * sidebar-text-font-family:
+ * sidebar-text-font-size:
+ * sidebar-text-font-weight:
+ * sidebar-text-line-height:
+ * sidebar-height:
+ * sidebar-width:
+ * sidebar-width-compact:
+ * sidebar-padding:
+ * sidebar-header-height:
+ * sidebar-footer-height:
+ * sidebar-shadow:
+ * sidebar-menu-item-highlight-color:
+ * sidebar-scrollbar-background-color:
+ * sidebar-scrollbar-color:
+ * sidebar-scrollbar-width:
  */
 @Component({
  selector: 'nb-sidebar',

src/framework/theme/styles/themes/_default.scss

@@ -53,9 +53,8 @@ $theme: (
 
  shadow: 0 2px 12px 0 #dfe3eb,
 
- scrollbar-fg: #dadada,
- scrollbar-bg: #f2f2f2,
- scrollbar-width: 5px,
+ scrollbar-fg: scrollbar-color,
+ scrollbar-bg: scrollbar-background-color,
  scrollbar-thumb-radius: 2.5px,
 
  radial-gradient: none,
@@ -254,6 +253,10 @@ $theme: (
  outline-width: 0.375rem,
  outline-color: color-basic-300,
 
+ scrollbar-color: color-basic-300,
+ scrollbar-background-color: color-basic-100,
+ scrollbar-width: 0.3125rem,
+
  /* Components mappings */
 
  card-background-color: color-white,
@@ -299,8 +302,8 @@ $theme: (
  card-shadow: none,
  card-margin-bottom: 1.5rem,
 
- card-scrollbar-color: scrollbar-fg,
- card-scrollbar-background-color: scrollbar-bg,
+ card-scrollbar-color: scrollbar-color,
+ card-scrollbar-background-color: scrollbar-background-color,
  card-scrollbar-width: scrollbar-width,
 
  header-font-family: font-secondary,
@@ -336,17 +339,23 @@ $theme: (
  layout-medium-padding: 1.5rem 1.5rem 0.5rem,
  layout-small-padding: 1rem 1rem 0,
 
- sidebar-font-size: font-size,
- sidebar-line-height: line-height,
- sidebar-fg: color-fg-heading,
- sidebar-bg: color-bg,
+ sidebar-background-color: color-basic-100,
+ sidebar-text-color: text-dark-color,
+ sidebar-text-font-family: text-paragraph-font-family,
+ sidebar-text-font-size: text-paragraph-font-size,
+ sidebar-text-font-weight: text-paragraph-font-weight,
+ sidebar-text-line-height: text-paragraph-line-height,
  sidebar-height: 100vh,
  sidebar-width: 16rem,
  sidebar-width-compact: 3.5rem,
  sidebar-padding: padding,
  sidebar-header-height: 3.5rem,
  sidebar-footer-height: 3.5rem,
  sidebar-shadow: shadow,
+ sidebar-menu-item-highlight-color: color-primary,
+ sidebar-scrollbar-background-color: scrollbar-background-color,
+ sidebar-scrollbar-color: scrollbar-color,
+ sidebar-scrollbar-width: scrollbar-width,
 
  menu-font-family: font-secondary,
  menu-font-size: font-size,
@@ -420,8 +429,8 @@ $theme: (
  tabset-content-text-font-weight: text-paragraph-font-weight,
  tabset-content-text-line-height: text-paragraph-line-height,
 
- tabset-scrollbar-color: scrollbar-fg,
- tabset-scrollbar-background-color: scrollbar-bg,
+ tabset-scrollbar-color: scrollbar-color,
+ tabset-scrollbar-background-color: scrollbar-background-color,
  tabset-scrollbar-width: scrollbar-width,
  tabset-tab-text-hide-breakpoint: 36rem,
 
@@ -459,8 +468,8 @@ $theme: (
  route-tabset-divider-color: divider-color,
  route-tabset-divider-width: 1px,
 
- route-tabset-scrollbar-color: scrollbar-fg,
- route-tabset-scrollbar-background-color: scrollbar-bg,
+ route-tabset-scrollbar-color: scrollbar-color,
+ route-tabset-scrollbar-background-color: scrollbar-background-color,
  route-tabset-scrollbar-width: scrollbar-width,
  route-tabset-tab-text-hide-breakpoint: 36rem,