feat(typography): sync with Eva 1 (#1648)

akveo · Jul 9, 2019 · a2e20a0 · a2e20a0
1 parent 44225d4
commit a2e20a0
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 37 deletions.
diff --git a/src/framework/theme/components/alert/_alert.component.theme.scss b/src/framework/theme/components/alert/_alert.component.theme.scss
@@ -59,6 +59,11 @@
       &.status-#{$status} {
         color: nb-theme(alert-#{$status}-text-color);
         background-color: nb-theme(alert-#{$status}-background-color);
+
+        a,
+        a:hover {
+          color: nb-theme(alert-#{$status}-text-color);
+        }
       }
 
       &.accent-#{$status} {

diff --git a/src/framework/theme/components/card/_card.component.theme.scss b/src/framework/theme/components/card/_card.component.theme.scss
@@ -53,6 +53,11 @@
           border-bottom-width: 0;
           border-bottom-color: nb-theme(card-header-#{$status}-background-color);
           color: nb-theme(card-header-#{$status}-text-color);
+
+          a,
+          a:hover {
+            color: nb-theme(card-header-#{$status}-text-color);
+          }
         }
       }
 

diff --git a/src/framework/theme/components/toastr/_toast.component.theme.scss b/src/framework/theme/components/toastr/_toast.component.theme.scss
@@ -57,6 +57,10 @@
       border-color: nb-theme(toastr-#{$status}-border-color);
       color: nb-theme(toastr-#{$status}-text-color);
 
+      .title {
+        color: nb-theme(toastr-#{$status}-text-color);
+      }
+
       &.destroy-by-click:hover {
         background: nb-theme(toastr-destroyable-hover-#{$status}-background-color);
         border-color: nb-theme(toastr-destroyable-hover-#{$status}-border-color);

diff --git a/src/framework/theme/components/toastr/toast.component.html b/src/framework/theme/components/toastr/toast.component.html
@@ -2,6 +2,6 @@
   <nb-icon [icon]="icon" [pack]="iconPack"></nb-icon>
 </div>
 <div class="content-container">
-  <span class="title">{{ toast.title }}</span>
+  <span class="title subtitle">{{ toast.title }}</span>
   <div class="message">{{ toast.message }}</div>
 </div>
diff --git a/src/framework/theme/components/toastr/toast.component.scss b/src/framework/theme/components/toastr/toast.component.scss
@@ -11,18 +11,9 @@
   margin: 0.5rem;
 
   .title {
-    font-weight: 800;
     margin-right: 0.25rem;
   }
 
-  > .content-container {
-    line-height: 1.25;
-
-    > .message {
-      font-weight: 300;
-    }
-  }
-
   &.default, &:not(.has-icon) {
     .content-container {
       display: flex;

diff --git a/src/framework/theme/styles/global/typography/_typography.scss b/src/framework/theme/styles/global/typography/_typography.scss
@@ -22,14 +22,64 @@
     }
   }
 
-  p {
+  .subtitle,
+  .subtitle-2 {
+    color: nb-theme(text-basic-color);
+  }
+
+  .subtitle {
+    font-family: nb-theme(text-subtitle-font-family);
+    font-size: nb-theme(text-subtitle-font-size);
+    font-weight: nb-theme(text-subtitle-font-weight);
+    line-height: nb-theme(text-subtitle-line-height);
+  }
+
+  .subtitle-2 {
+    font-family: nb-theme(text-subtitle-2-font-family);
+    font-size: nb-theme(text-subtitle-2-font-size);
+    font-weight: nb-theme(text-subtitle-2-font-weight);
+    line-height: nb-theme(text-subtitle-2-line-height);
+  }
+
+  p,
+  .paragraph {
     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);
   }
 
+  .paragraph-2 {
+    color: nb-theme(text-basic-color);
+    font-family: nb-theme(text-paragraph-2-font-family);
+    font-size: nb-theme(text-paragraph-2-font-size);
+    font-weight: nb-theme(text-paragraph-2-font-weight);
+    line-height: nb-theme(text-paragraph-2-line-height);
+  }
+
+  @each $status in nb-get-statuses() {
+    .text-#{$status} {
+      color: nb-theme(color-#{$status}-default);
+    }
+  }
+
+  .text-basic {
+    color: nb-theme(text-basic-color);
+  }
+  .text-alternate {
+    color: nb-theme(text-alternate-color);
+  }
+  .text-control {
+    color: nb-theme(text-control-color);
+  }
+  .text-disabled {
+    color: nb-theme(text-disabled-color);
+  }
+  .text-hint {
+    color: nb-theme(text-hint-color);
+  }
+
   a {
     color: nb-theme(link-text-color);
     font-size: inherit;
@@ -44,6 +94,16 @@
     &:hover {
       color: nb-theme(link-text-hover-color);
     }
+
+    .link-control,
+    .link-control:hover {
+      color: nb-theme(text-control-color);
+    }
+
+    .link-alternate,
+    .link-alternate:hover {
+      color: nb-theme(text-alternate-color);
+    }
   }
 
   .label {

diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss
@@ -195,36 +195,36 @@ $theme: (
   /* Fonts and text styles - headings, subtitles, paragraphs, captions, button */
 
   font-family-primary: unquote('Open Sans, sans-serif'),
-  font-family-secondary: unquote('Raleway, sans-serif'),
+  font-family-secondary: font-family-primary,
 
   text-heading-1-font-family: font-family-secondary,
   text-heading-1-font-size: 2.25rem,
-  text-heading-1-font-weight: 800,
+  text-heading-1-font-weight: 700,
   text-heading-1-line-height: 3rem,
 
   text-heading-2-font-family: font-family-secondary,
   text-heading-2-font-size: 2rem,
-  text-heading-2-font-weight: 800,
+  text-heading-2-font-weight: 700,
   text-heading-2-line-height: 2.5rem,
 
   text-heading-3-font-family: font-family-secondary,
   text-heading-3-font-size: 1.875rem,
-  text-heading-3-font-weight: 800,
+  text-heading-3-font-weight: 700,
   text-heading-3-line-height: 2.5rem,
 
   text-heading-4-font-family: font-family-secondary,
   text-heading-4-font-size: 1.625rem,
-  text-heading-4-font-weight: 800,
+  text-heading-4-font-weight: 700,
   text-heading-4-line-height: 2rem,
 
   text-heading-5-font-family: font-family-secondary,
   text-heading-5-font-size: 1.375rem,
-  text-heading-5-font-weight: 800,
+  text-heading-5-font-weight: 700,
   text-heading-5-line-height: 2rem,
 
   text-heading-6-font-family: font-family-secondary,
   text-heading-6-font-size: 1.125rem,
-  text-heading-6-font-weight: 800,
+  text-heading-6-font-weight: 700,
   text-heading-6-line-height: 1.5rem,
 
   text-subtitle-font-family: font-family-primary,
@@ -245,11 +245,11 @@ $theme: (
   text-paragraph-2-font-family: font-family-primary,
   text-paragraph-2-font-size: 0.8125rem,
   text-paragraph-2-font-weight: 400,
-  text-paragraph-2-line-height: 1rem,
+  text-paragraph-2-line-height: 1.125rem,
 
   text-label-font-family: font-family-primary,
   text-label-font-size: 0.75rem,
-  text-label-font-weight: 800,
+  text-label-font-weight: 700,
   text-label-line-height: 1rem,
 
   text-caption-font-family: font-family-primary,
@@ -263,7 +263,7 @@ $theme: (
   text-caption-2-line-height: 1rem,
 
   text-button-font-family: font-family-primary,
-  text-button-font-weight: 800,
+  text-button-font-weight: 700,
   text-button-tiny-font-size: 0.625rem,
   text-button-tiny-line-height: 0.75rem,
   text-button-small-font-size: 0.75rem,

diff --git a/src/framework/theme/styles/themes/_mapping.scss b/src/framework/theme/styles/themes/_mapping.scss
@@ -35,15 +35,15 @@ $eva-mapping: (
   card-header-text-line-height: text-subtitle-line-height,
 
   card-header-primary-background-color: color-primary-default,
-  card-header-primary-text-color: text-alternate-color,
+  card-header-primary-text-color: text-control-color,
   card-header-info-background-color: color-info-default,
-  card-header-info-text-color: text-alternate-color,
+  card-header-info-text-color: text-control-color,
   card-header-success-background-color: color-success-default,
-  card-header-success-text-color: text-alternate-color,
+  card-header-success-text-color: text-control-color,
   card-header-warning-background-color: color-warning-default,
-  card-header-warning-text-color: text-alternate-color,
+  card-header-warning-text-color: text-control-color,
   card-header-danger-background-color: color-danger-default,
-  card-header-danger-text-color: text-alternate-color,
+  card-header-danger-text-color: text-control-color,
 
   card-height-tiny: 6rem,
   card-height-small: 21rem,
@@ -227,7 +227,7 @@ $eva-mapping: (
   route-tabset-tab-text-font-family: text-button-font-family,
   route-tabset-tab-text-font-size: text-button-medium-font-size,
   route-tabset-tab-text-font-weight: text-button-font-weight,
-  route-tabset-tab-text-line-height: text-button-line-height,
+  route-tabset-tab-text-line-height: text-button-medium-line-height,
   route-tabset-tab-text-transform: uppercase,
   route-tabset-tab-underline-width: 0.25rem,
   route-tabset-tab-underline-color: transparent,
@@ -349,7 +349,7 @@ $eva-mapping: (
   actions-text-color: text-basic-color,
   actions-text-font-family: text-button-font-family,
   actions-text-font-weight: text-button-font-weight,
-  actions-text-line-height: text-button-line-height,
+  actions-text-line-height: text-button-medium-line-height,
 
   actions-disabled-icon-color: text-disabled-color,
   actions-disabled-text-color: text-disabled-color,
@@ -429,10 +429,10 @@ $eva-mapping: (
   toastr-shadow: shadow,
 
   toastr-text-color: text-basic-color,
-  toastr-text-font-family: text-paragraph-font-family,
-  toastr-text-font-size: text-paragraph-font-size,
-  toastr-text-font-weight: text-paragraph-font-weight,
-  toastr-text-line-height: text-paragraph-line-height,
+  toastr-text-font-family: text-paragraph-2-font-family,
+  toastr-text-font-size: text-paragraph-2-font-size,
+  toastr-text-font-weight: text-paragraph-2-font-weight,
+  toastr-text-line-height: text-paragraph-2-line-height,
   toastr-title-text-font-family: text-subtitle-font-family,
   toastr-title-text-font-size: text-subtitle-font-size,
   toastr-title-text-font-weight: text-subtitle-font-weight,
@@ -1640,10 +1640,10 @@ $eva-mapping: (
   radio-border-style: solid,
   radio-border-width: 1px,
   radio-text-color: text-basic-color,
-  radio-text-font-family: text-subtitle-font-family,
-  radio-text-font-size: text-subtitle-font-size,
-  radio-text-font-weight: text-subtitle-font-weight,
-  radio-text-line-height: text-subtitle-line-height,
+  radio-text-font-family: text-subtitle-2-font-family,
+  radio-text-font-size: text-subtitle-2-font-size,
+  radio-text-font-weight: text-subtitle-2-font-weight,
+  radio-text-line-height: text-subtitle-2-line-height,
   radio-outline-color: outline-color,
   radio-outline-width: outline-width,
 

diff --git a/src/playground/styles/styles.scss b/src/playground/styles/styles.scss
@@ -3,7 +3,7 @@
 @import '../../framework/auth/styles/globals';
 @import 'example-helpers';
 
-@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Raleway:400,600,800&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
 
 @include nb-install() {
   @include nb-theme-global();