Feat/apply new typography (#27)

* feat: added new font and changed type styles * feat: added new font and changed type styles * fix: adjusted font family and styles
bcgov · Nov 25, 2022 · 8df9c37 · 8df9c37
1 parent 431da0d
commit 8df9c37
Show file tree

Hide file tree

Showing 22 changed files with 59 additions and 0 deletions.
diff --git a/src/assets/font/BCSans-Bold.eot b/src/assets/font/BCSans-Bold.eot
diff --git a/src/assets/font/BCSans-Bold.otf b/src/assets/font/BCSans-Bold.otf
diff --git a/src/assets/font/BCSans-Bold.ttf b/src/assets/font/BCSans-Bold.ttf
diff --git a/src/assets/font/BCSans-Bold.woff b/src/assets/font/BCSans-Bold.woff
diff --git a/src/assets/font/BCSans-Bold.woff2 b/src/assets/font/BCSans-Bold.woff2
diff --git a/src/assets/font/BCSans-BoldItalic.eot b/src/assets/font/BCSans-BoldItalic.eot
diff --git a/src/assets/font/BCSans-BoldItalic.otf b/src/assets/font/BCSans-BoldItalic.otf
diff --git a/src/assets/font/BCSans-BoldItalic.ttf b/src/assets/font/BCSans-BoldItalic.ttf
diff --git a/src/assets/font/BCSans-BoldItalic.woff b/src/assets/font/BCSans-BoldItalic.woff
diff --git a/src/assets/font/BCSans-BoldItalic.woff2 b/src/assets/font/BCSans-BoldItalic.woff2
diff --git a/src/assets/font/BCSans-Italic.eot b/src/assets/font/BCSans-Italic.eot
diff --git a/src/assets/font/BCSans-Italic.otf b/src/assets/font/BCSans-Italic.otf
diff --git a/src/assets/font/BCSans-Italic.ttf b/src/assets/font/BCSans-Italic.ttf
diff --git a/src/assets/font/BCSans-Italic.woff b/src/assets/font/BCSans-Italic.woff
diff --git a/src/assets/font/BCSans-Italic.woff2 b/src/assets/font/BCSans-Italic.woff2
diff --git a/src/assets/font/BCSans-Regular.eot b/src/assets/font/BCSans-Regular.eot
diff --git a/src/assets/font/BCSans-Regular.otf b/src/assets/font/BCSans-Regular.otf
diff --git a/src/assets/font/BCSans-Regular.ttf b/src/assets/font/BCSans-Regular.ttf
diff --git a/src/assets/font/BCSans-Regular.woff b/src/assets/font/BCSans-Regular.woff
diff --git a/src/assets/font/BCSans-Regular.woff2 b/src/assets/font/BCSans-Regular.woff2
diff --git a/src/custom.scss b/src/custom.scss
@@ -1,8 +1,14 @@
 @use './theme/light-theme.scss' as light;
 @use './theme/colors.scss' as colors;
+@use './theme/type-family.scss' as types;
 
 @use './theme/components-overrides.scss';
 
+@use '@carbon/type/scss/_font-family.scss' with (
+  $font-families: types.$type-family,
+  $font-weights: types.$font-weights
+);
+
 // Set the correct light theme
 @use '@carbon/react/scss/themes';
 @use '@carbon/react/scss/theme' with (

diff --git a/src/theme/type-family.scss b/src/theme/type-family.scss
@@ -0,0 +1,53 @@
+@use 'sass:string';
+
+@font-face {
+  font-family: "BC Sans";
+  src: url('../assets/font/BCSans-Regular.woff') format('woff'),
+       url('../assets/font/BCSans-Regular.woff2') format('woff2');
+  font-style: normal;
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: "BC Sans";
+  src: url('../assets/font/BCSans-Italic.woff') format('woff'),
+       url('../assets/font/BCSans-Italic.woff2') format('woff2');
+  font-style: italic;
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: "BC Sans";
+  src: url('../assets/font/BCSans-Bold.woff') format('woff'),
+       url('../assets/font/BCSans-Bold.woff2') format('woff2');
+  font-style: normal;
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: "BC Sans";
+  src: url('../assets/font/BCSans-BoldItalic.woff') format('woff'),
+       url('../assets/font/BCSans-BoldItalic.woff2') format('woff2');
+  font-style: italic;
+  font-weight: bold;
+}
+
+$type-family: (
+  'mono':
+    string.unquote(
+      "'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace"
+    ),
+  'sans':
+    string.unquote(
+      "'BC Sans', 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
+    ),
+);
+
+// Light and regular have the same value because we don't have a light value
+// for font-weight, so we use only the regular value whenever is intend to use
+// the ligth value
+$font-weights: (
+  'light': 400,
+  'regular': 400,
+  'bold': 700,
+);