Update global typography
Updated the following body, label, and heading
styles to match new style guide:
- Font sizes
- Font weight
- Line height
- Color
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I014c968f6542b697fec8c3b9af781e64ac10794d
diff --git a/docs/themes/readme.md b/docs/themes/readme.md
index 4d76aa2..0b391f6 100644
--- a/docs/themes/readme.md
+++ b/docs/themes/readme.md
@@ -256,7 +256,7 @@
}
h2 {
- @include font-size($h4-font-size);
+ @include font-size($h3-font-size);
margin-bottom: $spacer;
&::after {
content: '';
diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss
index 5a6a11b..c11e046 100644
--- a/src/assets/styles/bmc/custom/_base.scss
+++ b/src/assets/styles/bmc/custom/_base.scss
@@ -4,4 +4,47 @@
color: gray("800");
font-size: 14px;
font-weight: 400;
+ line-height: 1.4285;
+}
+
+h1,
+.h1 {
+ font-size: 2.625rem;
+ font-weight: 300;
+ line-height: 1.238;
+}
+
+h2,
+.h2 {
+ font-size: 2.25rem;
+ font-weight: 300;
+ line-height: 1.3333;
+}
+
+h3,
+.h3 {
+ font-size: 1.75rem;
+ font-weight: 400;
+ line-height: 1.2857;
+}
+
+h4,
+.h4 {
+ font-size: 1.25rem;
+ font-weight: 400;
+ line-height: 1.3;
+}
+
+h5,
+.h5 {
+ font-size: 1rem;
+ font-weight: 500;
+ line-height: 1.375;
+}
+
+h6,
+.h6 {
+ font-size: 0.875rem;
+ font-weight: 500;
+ line-height: 1.2857;
}
diff --git a/src/components/Global/PageSection.vue b/src/components/Global/PageSection.vue
index 6f44a3a..96f7134 100644
--- a/src/components/Global/PageSection.vue
+++ b/src/components/Global/PageSection.vue
@@ -25,7 +25,7 @@
}
h2 {
- @include font-size($h4-font-size);
+ @include font-size($h3-font-size);
margin-bottom: $spacer;
&::after {
content: '';
diff --git a/src/components/Global/PageTitle.vue b/src/components/Global/PageTitle.vue
index c4a9775..dc0738e 100644
--- a/src/components/Global/PageTitle.vue
+++ b/src/components/Global/PageTitle.vue
@@ -28,10 +28,6 @@
.page-title {
margin-bottom: $spacer * 2;
}
-h1 {
- font-weight: $display4-weight;
- line-height: $display-line-height;
-}
p {
max-width: 72ch;
}
diff --git a/src/components/Global/TableFilter.vue b/src/components/Global/TableFilter.vue
index afbe8a7..b514483 100644
--- a/src/components/Global/TableFilter.vue
+++ b/src/components/Global/TableFilter.vue
@@ -133,9 +133,6 @@
<style lang="scss" scoped>
@import 'src/assets/styles/helpers';
-p {
- font-size: 1.2rem;
-}
.badge {
margin-right: $spacer / 2;
}
diff --git a/src/views/Overview/OverviewNetwork.vue b/src/views/Overview/OverviewNetwork.vue
index a495fae..70a8474 100644
--- a/src/views/Overview/OverviewNetwork.vue
+++ b/src/views/Overview/OverviewNetwork.vue
@@ -8,9 +8,9 @@
v-else
:key="ethernetInterface.id"
>
- <p class="h6 interface-name font-weight-bold">
+ <h3 class="h5 interface-name font-weight-bold">
{{ ethernetInterface.Id }}
- </p>
+ </h3>
<b-row>
<b-col md="12" lg="4">
<dl>