Skip to content

Commit c373cfc

Browse files
ygggyggg
committed
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
1 parent d0c28a0 commit c373cfc

File tree

3 files changed

+55
-40
lines changed

3 files changed

+55
-40
lines changed

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

Lines changed: 28 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@
3131

3232
nb-layout {
3333
@include nb-scrollbars(
34-
nb-theme(scrollbar-fg),
35-
nb-theme(scrollbar-bg),
36-
nb-theme(scrollbar-width));
34+
nb-theme(layout-scrollbar-color),
35+
nb-theme(layout-scrollbar-background-color),
36+
nb-theme(layout-scrollbar-width));
3737
}
3838

3939

@@ -59,7 +59,7 @@
5959

6060
nb-layout.window-mode {
6161

62-
background: nb-theme(layout-window-mode-bg);
62+
background: nb-theme(layout-window-mode-background-color);
6363
display: block;
6464

6565
.scrollable-container {
@@ -110,31 +110,33 @@
110110
}
111111

112112
nb-layout .layout {
113-
// TODO: probably we need to separate this form here and move it to the typography scss module
114-
font-family: nb-theme(layout-font-family);
115-
font-size: nb-theme(layout-font-size);
116-
line-height: nb-theme(layout-line-height);
117-
color: nb-theme(layout-fg);
118-
background: nb-theme(layout-bg);
113+
background-color: nb-theme(layout-background-color);
114+
color: nb-theme(layout-text-color);
115+
font-family: nb-theme(layout-text-font-family);
116+
font-size: nb-theme(layout-text-font-size);
117+
font-weight: nb-theme(layout-text-font-weight);
118+
line-height: nb-theme(layout-text-line-height);
119119
min-height: nb-theme(layout-min-height);
120120

121121
nb-layout-header {
122-
font-family: nb-theme(header-font-family);
123-
font-size: nb-theme(header-font-size);
124-
line-height: nb-theme(header-line-height);
122+
color: nb-theme(header-text-color);
123+
font-family: nb-theme(header-text-font-family);
124+
font-size: nb-theme(header-text-font-size);
125+
font-weight: nb-theme(header-text-font-weight);
126+
line-height: nb-theme(header-text-line-height);
125127

126128
nav {
129+
background: nb-theme(header-background-color);
130+
color: nb-theme(header-text-color);
127131
box-shadow: nb-theme(header-shadow);
128132
height: nb-theme(header-height);
129133
padding: nb-theme(header-padding);
130-
background: nb-theme(header-bg);
131-
color: nb-theme(header-fg);
132134

133135
a {
134-
color: nb-theme(header-fg);
136+
color: nb-theme(header-text-color);
135137

136138
@include hover-focus-active {
137-
color: nb-theme(header-fg);
139+
color: nb-theme(header-text-color);
138140
}
139141
}
140142
}
@@ -165,16 +167,20 @@
165167
box-shadow: nb-theme(footer-shadow);
166168

167169
nav {
170+
background-color: nb-theme(footer-background-color);
171+
border-top: 1px solid nb-theme(footer-divider-color);
172+
color: nb-theme(footer-text-color);
173+
font-family: nb-theme(footer-text-font-family);
174+
font-size: nb-theme(footer-text-font-size);
175+
font-weight: nb-theme(footer-text-font-weight);
176+
line-height: nb-theme(footer-text-line-height);
168177
padding: nb-theme(footer-padding);
169-
background: nb-theme(footer-bg);
170-
color: nb-theme(footer-fg);
171-
border-top: 1px solid nb-theme(footer-separator);
172178

173179
a {
174-
color: nb-theme(footer-fg-highlight);
180+
color: nb-theme(footer-text-highlight-color);
175181

176182
@include hover-focus-active {
177-
color: nb-theme(footer-fg-highlight);
183+
color: nb-theme(footer-text-highlight-color);
178184
}
179185
}
180186
}

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

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -306,38 +306,47 @@ $theme: (
306306
card-scrollbar-background-color: scrollbar-background-color,
307307
card-scrollbar-width: scrollbar-width,
308308

309-
header-font-family: font-secondary,
310-
header-font-size: font-size,
311-
header-line-height: line-height,
312-
header-fg: color-fg-heading,
313-
header-bg: color-bg,
309+
header-background-color: color-basic-100,
310+
header-text-color: text-dark-color,
311+
header-text-font-family: text-paragraph-font-family,
312+
header-text-font-size: text-paragraph-font-size,
313+
header-text-font-weight: text-paragraph-font-weight,
314+
header-text-line-height: text-paragraph-line-height,
314315
header-height: 4.75rem,
315316
header-padding: 1.25rem,
316317
header-shadow: shadow,
317318

319+
footer-background-color: color-basic-100,
320+
footer-text-color: text-dark-color,
321+
footer-text-font-family: text-paragraph-font-family,
322+
footer-text-font-size: text-paragraph-font-size,
323+
footer-text-font-weight: text-paragraph-font-weight,
324+
footer-text-line-height: text-paragraph-line-height,
325+
footer-text-highlight-color: color-primary-hover,
318326
footer-height: 4.725rem,
319327
footer-padding: 1.25rem,
320-
footer-fg: color-fg-heading,
321-
footer-fg-highlight: color-fg-heading,
322-
footer-bg: color-bg,
323-
footer-separator: separator,
328+
footer-divider-color: divider-color,
324329
footer-shadow: shadow,
325330

326-
layout-font-family: font-main,
327-
layout-font-size: font-size,
328-
layout-line-height: line-height,
329-
layout-fg: color-fg,
330-
layout-bg: #ebeff5,
331+
layout-background-color: color-basic-100,
332+
layout-text-color: text-dark-color,
333+
layout-text-font-family: text-paragraph-font-family,
334+
layout-text-font-size: text-paragraph-font-size,
335+
layout-text-font-weight: text-paragraph-font-weight,
336+
layout-text-line-height: text-paragraph-line-height,
331337
layout-min-height: 100vh,
332338
layout-content-width: 900px,
333339
layout-window-mode-min-width: 300px,
334340
layout-window-mode-max-width: 1920px,
335-
layout-window-mode-bg: layout-bg,
341+
layout-window-mode-background-color: layout-bg,
336342
layout-window-mode-padding-top: 4.75rem,
337343
layout-window-shadow: shadow,
338344
layout-padding: 2.25rem 2.25rem 0.75rem,
339345
layout-medium-padding: 1.5rem 1.5rem 0.5rem,
340346
layout-small-padding: 1rem 1rem 0,
347+
layout-scrollbar-background-color: scrollbar-background-color,
348+
layout-scrollbar-color: scrollbar-color,
349+
layout-scrollbar-width: scrollbar-width,
341350

342351
sidebar-background-color: color-basic-100,
343352
sidebar-text-color: text-dark-color,

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55

66
<nb-layout-header subheader>
77
<nb-actions>
8-
<nb-action icon="home-ouline"></nb-action>
9-
<nb-action icon="search-ouline"></nb-action>
10-
<nb-action icon="edit-ouline"></nb-action>
8+
<nb-action icon="home-outline"></nb-action>
9+
<nb-action icon="search-outline"></nb-action>
10+
<nb-action icon="edit-outline"></nb-action>
1111
</nb-actions>
1212
</nb-layout-header>
1313

0 commit comments

Comments
 (0)