feat(layout): Eva style (#1368)

BREAKING CHANGE:

Following theme properties were renamed:

header-font-family -> header-text-font-family
header-font-size -> header-text-font-size
header-line-height -> header-text-line-height
header-fg -> header-text-color
header-bg -> header-background-color

layout-font-family -> layout-text-font-family
layout-font-size -> layout-text-font-size
layout-line-height -> layout-text-line-height
layout-fg -> layout-text-color
layout-bg -> layout-background-color
layout-window-mode-bg -> layout-window-mode-background-color

footer-fg -> footer-text-color
footer-fg-highlight -> footer-text-highlight-color
footer-bg -> footer-background-color
footer-separator -> footer-divider-color

src/framework/theme/components/layout/_layout.component.theme.scss

@@ -31,9 +31,9 @@
 
  nb-layout {
  @include nb-scrollbars(
- nb-theme(scrollbar-fg),
- nb-theme(scrollbar-bg),
- nb-theme(scrollbar-width));
+ nb-theme(layout-scrollbar-color),
+ nb-theme(layout-scrollbar-background-color),
+ nb-theme(layout-scrollbar-width));
  }
 
 
@@ -59,7 +59,7 @@
 
  nb-layout.window-mode {
 
- background: nb-theme(layout-window-mode-bg);
+ background: nb-theme(layout-window-mode-background-color);
  display: block;
 
  .scrollable-container {
@@ -110,31 +110,33 @@
  }
 
  nb-layout .layout {
- // TODO: probably we need to separate this form here and move it to the typography scss module
- font-family: nb-theme(layout-font-family);
- font-size: nb-theme(layout-font-size);
- line-height: nb-theme(layout-line-height);
- color: nb-theme(layout-fg);
- background: nb-theme(layout-bg);
+ background-color: nb-theme(layout-background-color);
+ color: nb-theme(layout-text-color);
+ font-family: nb-theme(layout-text-font-family);
+ font-size: nb-theme(layout-text-font-size);
+ font-weight: nb-theme(layout-text-font-weight);
+ line-height: nb-theme(layout-text-line-height);
  min-height: nb-theme(layout-min-height);
 
  nb-layout-header {
- font-family: nb-theme(header-font-family);
- font-size: nb-theme(header-font-size);
- line-height: nb-theme(header-line-height);
+ color: nb-theme(header-text-color);
+ font-family: nb-theme(header-text-font-family);
+ font-size: nb-theme(header-text-font-size);
+ font-weight: nb-theme(header-text-font-weight);
+ line-height: nb-theme(header-text-line-height);
 
  nav {
+ background: nb-theme(header-background-color);
+ color: nb-theme(header-text-color);
  box-shadow: nb-theme(header-shadow);
  height: nb-theme(header-height);
  padding: nb-theme(header-padding);
- background: nb-theme(header-bg);
- color: nb-theme(header-fg);
 
  a {
- color: nb-theme(header-fg);
+ color: nb-theme(header-text-color);
 
  @include hover-focus-active {
- color: nb-theme(header-fg);
+ color: nb-theme(header-text-color);
  }
  }
  }
@@ -165,16 +167,20 @@
  box-shadow: nb-theme(footer-shadow);
 
  nav {
+ background-color: nb-theme(footer-background-color);
+ border-top: 1px solid nb-theme(footer-divider-color);
+ color: nb-theme(footer-text-color);
+ font-family: nb-theme(footer-text-font-family);
+ font-size: nb-theme(footer-text-font-size);
+ font-weight: nb-theme(footer-text-font-weight);
+ line-height: nb-theme(footer-text-line-height);
  padding: nb-theme(footer-padding);
- background: nb-theme(footer-bg);
- color: nb-theme(footer-fg);
- border-top: 1px solid nb-theme(footer-separator);
 
  a {
- color: nb-theme(footer-fg-highlight);
+ color: nb-theme(footer-text-highlight-color);
 
  @include hover-focus-active {
- color: nb-theme(footer-fg-highlight);
+ color: nb-theme(footer-text-highlight-color);
  }
  }
  }

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

@@ -306,38 +306,47 @@ $theme: (
  card-scrollbar-background-color: scrollbar-background-color,
  card-scrollbar-width: scrollbar-width,
 
- header-font-family: font-secondary,
- header-font-size: font-size,
- header-line-height: line-height,
- header-fg: color-fg-heading,
- header-bg: color-bg,
+ header-background-color: color-basic-100,
+ header-text-color: text-dark-color,
+ header-text-font-family: text-paragraph-font-family,
+ header-text-font-size: text-paragraph-font-size,
+ header-text-font-weight: text-paragraph-font-weight,
+ header-text-line-height: text-paragraph-line-height,
  header-height: 4.75rem,
  header-padding: 1.25rem,
  header-shadow: shadow,
 
+ footer-background-color: color-basic-100,
+ footer-text-color: text-dark-color,
+ footer-text-font-family: text-paragraph-font-family,
+ footer-text-font-size: text-paragraph-font-size,
+ footer-text-font-weight: text-paragraph-font-weight,
+ footer-text-line-height: text-paragraph-line-height,
+ footer-text-highlight-color: color-primary-hover,
  footer-height: 4.725rem,
  footer-padding: 1.25rem,
- footer-fg: color-fg-heading,
- footer-fg-highlight: color-fg-heading,
- footer-bg: color-bg,
- footer-separator: separator,
+ footer-divider-color: divider-color,
  footer-shadow: shadow,
 
- layout-font-family: font-main,
- layout-font-size: font-size,
- layout-line-height: line-height,
- layout-fg: color-fg,
- layout-bg: #ebeff5,
+ layout-background-color: color-basic-100,
+ layout-text-color: text-dark-color,
+ layout-text-font-family: text-paragraph-font-family,
+ layout-text-font-size: text-paragraph-font-size,
+ layout-text-font-weight: text-paragraph-font-weight,
+ layout-text-line-height: text-paragraph-line-height,
  layout-min-height: 100vh,
  layout-content-width: 900px,
  layout-window-mode-min-width: 300px,
  layout-window-mode-max-width: 1920px,
- layout-window-mode-bg: layout-bg,
+ layout-window-mode-background-color: layout-bg,
  layout-window-mode-padding-top: 4.75rem,
  layout-window-shadow: shadow,
  layout-padding: 2.25rem 2.25rem 0.75rem,
  layout-medium-padding: 1.5rem 1.5rem 0.5rem,
  layout-small-padding: 1rem 1rem 0,
+ layout-scrollbar-background-color: scrollbar-background-color,
+ layout-scrollbar-color: scrollbar-color,
+ layout-scrollbar-width: scrollbar-width,
 
  sidebar-background-color: color-basic-100,
  sidebar-text-color: text-dark-color,

src/playground/without-layout/layout/layout-subheader.component.html

@@ -5,9 +5,9 @@
 
  <nb-layout-header subheader>
  <nb-actions>
- <nb-action icon="home-ouline"></nb-action>
- <nb-action icon="search-ouline"></nb-action>
- <nb-action icon="edit-ouline"></nb-action>
+ <nb-action icon="home-outline"></nb-action>
+ <nb-action icon="search-outline"></nb-action>
+ <nb-action icon="edit-outline"></nb-action>
  </nb-actions>
  </nb-layout-header>