refactor: set global css variable for font size

implement #11
itworkedonmymachine · Dec 30, 2020 · 74b0831 · 74b0831
1 parent e875bcf
commit 74b0831
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 11 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -5,6 +5,18 @@
 </script>
 
 <style>
+  :root {
+    --header-height: 120px;
+
+    --font-size-xlarge: 64px;
+    --font-size-large: 48px;
+    --font-size-regular: 24px;
+    --font-size-small: 14px;
+
+    --font-weight-bold: 700;
+    --font-weight-light: 300;
+  }
+
   main {
     text-align: center;
     padding: 1em;

diff --git a/src/container/Header.svelte b/src/container/Header.svelte
@@ -13,21 +13,22 @@
 
   .container {
     width: 100%;
+    height: var(--header-height);
     display: flex;
     justify-content: space-between;
     text-align: center;
   }
 
   .title {
-    font-size: 64px;
-    font-weight: 700;
+    font-size: var(--font-size-xlarge);
+    font-weight: var(--font-weight-bold);
     margin: auto 0;
   }
 
   .search,
   .settings {
-    font-size: 24px;
-    font-weight: 300;
+    font-size: var(--font-size-regular);
+    font-weight: var(--font-weight-light);
     color: rgba(0, 0, 0, 0.3);
     margin: auto 0;
   }

diff --git a/test/container/Header.test.js b/test/container/Header.test.js
@@ -25,24 +25,24 @@ describe('Render Header', () => {
     expect(title.nextElementSibling).toEqual(settings);
   });
 
-  it('should render title w/ 64px bold, others w/ 24px light', async () => {
+  it('should render title w/ xlarge bold, others w/ regular light', async () => {
     const { getByTestId } = render(Header);
 
     const title = getByTestId('title');
     const search = getByTestId('search');
     const settings = getByTestId('settings');
 
     expect(title).toHaveStyle({
-      'font-size': '64px',
-      'font-weight': 700,
+      'font-size': 'var(--font-size-xlarge)',
+      'font-weight': 'var(--font-weight-bold)',
     });
     expect(search).toHaveStyle({
-      'font-size': '24px',
-      'font-weight': 300,
+      'font-size': 'var(--font-size-regular)',
+      'font-weight': 'var(--font-weight-light)',
     });
     expect(settings).toHaveStyle({
-      'font-size': '24px',
-      'font-weight': 300,
+      'font-size': 'var(--font-size-regular)',
+      'font-weight': 'var(--font-weight-light)',
     });
   });