feat(typography): specify body, paragraph and list styles (#1546)

akveo · May 31, 2019 · 310127b · 310127b
1 parent fe56655
commit 310127b
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 0 deletions.
diff --git a/src/framework/theme/components/list/_list.component.theme.scss b/src/framework/theme/components/list/_list.component.theme.scss
@@ -5,6 +5,11 @@
  nb-theme(list-item-divider-style)
  nb-theme(list-item-divider-color);
 
+ color: nb-theme(list-item-text-color);
+ font-family: nb-theme(list-item-font-family);
+ font-size: nb-theme(list-item-font-size);
+ font-weight: nb-theme(list-item-font-weight);
+ line-height: nb-theme(list-item-line-height);
  padding: nb-theme(list-item-padding);
 
  &:first-child {

diff --git a/src/framework/theme/components/list/list.component.ts b/src/framework/theme/components/list/list.component.ts
@@ -31,6 +31,11 @@ import { Component, Input, HostBinding } from '@angular/core';
  * list-item-divider-style:
  * list-item-divider-width:
  * list-item-padding:
+ * list-item-text-color:
+ * list-item-font-family:
+ * list-item-font-size:
+ * list-item-font-weight:
+ * list-item-line-height:
  */
 @Component({
  selector: 'nb-list',

diff --git a/src/framework/theme/styles/global/typography/_typography.scss b/src/framework/theme/styles/global/typography/_typography.scss
@@ -1,4 +1,12 @@
 @mixin nb-typography {
+ body {
+ color: nb-theme(text-basic-color);
+ font-family: nb-theme(text-paragraph-font-family);
+ font-size: nb-theme(text-paragraph-font-size);
+ font-weight: nb-theme(text-paragraph-font-weight);
+ line-height: nb-theme(text-paragraph-line-height);
+ }
+
  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6 {
  color: nb-theme(text-basic-color);
@@ -14,6 +22,14 @@
  }
  }
 
+ p {
+ color: nb-theme(text-basic-color);
+ font-family: nb-theme(text-paragraph-font-family);
+ font-size: nb-theme(text-paragraph-font-size);
+ font-weight: nb-theme(text-paragraph-font-weight);
+ line-height: nb-theme(text-paragraph-line-height);
+ }
+
  a {
  color: nb-theme(link-text-color);
  font-size: inherit;
@@ -62,4 +78,12 @@
  }
  }
  }
+
+ li {
+ color: nb-theme(list-item-text-color);
+ font-family: nb-theme(list-item-font-family);
+ font-size: nb-theme(list-item-font-size);
+ font-weight: nb-theme(list-item-font-weight);
+ line-height: nb-theme(list-item-line-height);
+ }
 }
diff --git a/src/framework/theme/styles/themes/_mapping.scss b/src/framework/theme/styles/themes/_mapping.scss
@@ -1180,6 +1180,11 @@ $eva-mapping: (
  list-item-divider-style: divider-style,
  list-item-divider-width: divider-width,
  list-item-padding: 1rem,
+ list-item-text-color: text-basic-color,
+ list-item-font-family: text-paragraph-font-family,
+ list-item-font-size: text-paragraph-font-size,
+ list-item-font-weight: text-paragraph-font-weight,
+ list-item-line-height: text-paragraph-line-height,
 
  calendar-width: 21.875rem,
  calendar-body-height: 25.625rem,