refactor: remove font-weight, rename system font-stack

woly-ui · Jul 5, 2021 · 69ff463 · 69ff463
1 parent 21dd735
commit 69ff463
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 14 deletions.
diff --git a/src/lib/font-stacks.ts b/src/lib/font-stacks.ts
@@ -45,13 +45,13 @@ export const systemUi = css`
   }
 
   /* prettier-ignore */
-  --system-ui:
+  --font-system-ui:
     /* Always render emoji first */
     system-stack-emoji,
     /* CSS Fonts Level 4 generic */
     system-ui,
-    /* Safari (MacOS 10.11+, iOS 9+)
-    */ -apple-system-body,
+    /* Safari (MacOS 10.11+, iOS 9+) */
+    -apple-system-body,
     /* Chrome until 55, Opera until 42 (MacOS) */
     BlinkMacSystemFont,
     /* Fallback to local fonts */

diff --git a/src/lib/global.ts b/src/lib/global.ts
@@ -6,14 +6,9 @@ export const Global = styled.div`
   ${systemUi}
 
   * {
-    font-family: 'Helvetica Neue', var(--system-ui);
+    font-family: 'Helvetica Neue', var(--font-system-ui);
   }
 
-  /* font-weights */
-  --font-light: 300;
-  --font-regular: 400;
-  --font-medium: 500;
-
   /* base colors */
   --bw-0: 0, 0%, 0%;
   --bw-1000: 0, 0%, 100%;

diff --git a/src/woly/atoms/heading/index.tsx b/src/woly/atoms/heading/index.tsx
@@ -18,7 +18,7 @@ export const Heading = styled.span.attrs(map)`
   --local-color: var(--woly-canvas-text-default);
 
   color: var(--local-color);
-  font-weight: var(--font-medium);
+  font-weight: 500;
   font-size: 24px;
   line-height: 30px;
 
@@ -31,6 +31,6 @@ export const Heading = styled.span.attrs(map)`
     line-height: 24px;
   }
   &[data-weight='regular'] {
-    font-weight: var(--font-regular);
+    font-weight: 400;
   }
 ` as StyledComponent<'label', Record<string, unknown>, HeadingProps & Priority>;
diff --git a/src/woly/atoms/text/index.tsx b/src/woly/atoms/text/index.tsx
@@ -20,12 +20,12 @@ export const Text = styled.p.attrs(map)`
   margin: 0;
 
   color: var(--local-color);
-  font-weight: var(--font-regular);
+  font-weight: 400;
   font-size: 15px;
   line-height: 21px;
 
   &[data-type='subtitle'][data-weight='medium'] {
-    font-weight: var(--font-regular);
+    font-weight: 400;
   }
 
   &[data-type='L'] {
@@ -55,6 +55,6 @@ export const Text = styled.p.attrs(map)`
   }
 
   &[data-type='hint'][data-weight='light'] {
-    font-weight: var(--font-light);
+    font-weight: 300;
   }
 ` as StyledComponent<'span', Record<string, unknown>, TextProps & Priority>;