Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(typography): sync with Eva 1 #1648

Merged
merged 16 commits into from
Jul 9, 2019
Merged

feat(typography): sync with Eva 1 #1648

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
6509b2a
refactor: make secondary font family same as primary
yggg Jun 27, 2019
15a72fd
fix: use existing theme variable
yggg Jun 27, 2019
ea684d2
fix(radio): use subtitle 2 font
yggg Jun 27, 2019
64f96d7
fix(card): use text variables appropriate for used background
yggg Jun 27, 2019
6b9e87b
fix: set color link color components with status background
yggg Jun 27, 2019
9830326
refactor(typography): use bold 700 instead of 800
yggg Jun 27, 2019
c71a576
refactor(typography): update paragraph 2 line height
yggg Jun 27, 2019
2adde97
fix(toastr): use Eva fonts
yggg Jun 27, 2019
3395346
refactor: remove unused fonts imports
yggg Jun 27, 2019
50cecda
feat(link): add control and alternate colors
yggg Jun 27, 2019
6520e9d
feat(typography): add subtitle classes
yggg Jun 27, 2019
4a2a380
feat(typography): add paragraph classes
yggg Jun 27, 2019
243bd0f
feat(typography): add text color classes
yggg Jun 27, 2019
b60eb9d
refactor: override link color in alert and cards with no exceptions
yggg Jul 1, 2019
8a47035
Merge branch 'master' into fix/typography-sync-with-eva-1
yggg Jul 1, 2019
f3ca187
Merge branch 'master' into fix/typography-sync-with-eva-1
yggg Jul 9, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/framework/theme/components/alert/_alert.component.theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} {
Expand Down
5 changes: 5 additions & 0 deletions src/framework/theme/components/card/_card.component.theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}

Expand Down
4 changes: 4 additions & 0 deletions src/framework/theme/components/toastr/_toast.component.theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion src/framework/theme/components/toastr/toast.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
9 changes: 0 additions & 9 deletions src/framework/theme/components/toastr/toast.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
62 changes: 61 additions & 1 deletion src/framework/theme/styles/global/typography/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand Down
20 changes: 10 additions & 10 deletions src/framework/theme/styles/themes/_default.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand Down
30 changes: 15 additions & 15 deletions src/framework/theme/styles/themes/_mapping.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,

Expand Down
2 changes: 1 addition & 1 deletion src/playground/styles/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down