dang-1725 / add Messina font - package version 2.0.0-beta.0 (#349)

* add Messina font * add [email protected] * remove Larsseit font imports * update changelog & package version to 2.0.0-beta.0 * wording nits on changelog
lob · Nov 2, 2022 · c7ed2c2 · c7ed2c2
1 parent 19eb875
commit c7ed2c2
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 54 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,11 +1,18 @@
 # CHANGELOG
 
+## v2.0.0-beta.0
+
+### Breaking changes
+
+Adds new font 'Messina', used as font-family class `font-messina`
+Removes old font 'Larsseit'
+
 ## 1.0.0-beta.65
 
 ### Features
 
-Remove strikethru line from disabled `MegaButton`
-Add image opacity to disabled `MegaButton`
+Remove strikethrough line from disabled `MegaButton`
+Add reduced image opacity to disabled `MegaButton`
 
 ## 1.0.0-beta.64
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "1.0.0-beta.65",
+  "version": "2.0.0-beta.0",
   "engines": {
     "node": ">=14.18.2",
     "npm": ">=8.3.0"
@@ -64,7 +64,7 @@
     "sass-loader": "^10.1.1",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
-    "tailwind-plugin-lob": "^0.0.42",
+    "tailwind-plugin-lob": "^1.0.0",
     "tailwindcss": "^3.0.24",
     "typescript": "~3.9.3",
     "vite": "^3.1.4",

diff --git a/src/assets/styles/fonts.scss b/src/assets/styles/fonts.scss
@@ -1,85 +1,99 @@
 $lob-assets-url: 'https://s3-us-west-2.amazonaws.com/public.lob.com';
 
-/* Larsseit */
+/* Messina */
 
 @font-face {
-  font-family: Larsseit;
-  src: url('#{$lob-assets-url}/fonts/larsseit/larsseit-regular.otf') format('opentype');
+  font-family: Messina;
+  font-style: normal;
+  font-weight: 300;
+  src: url('#{$lob-assets-url}/fonts/messina/MessinaSansWeb-Light.woff2') format('woff2'),
+    url('#{$lob-assets-url}/fonts/messina/MessinaSansWeb-Light.woff') format('woff');
 }
 
 @font-face {
-  font-family: Larsseit;
+  font-family: Messina;
   font-style: italic;
-  src: url('#{$lob-assets-url}/fonts/larsseit/larsseit-italic.otf') format('opentype');
+  font-weight: 300;
+  src: url('#{$lob-assets-url}/fonts/messina/MessinaSansWeb-LightItalic.woff2') format('woff2'),
+    url('#{$lob-assets-url}/fonts/messina/MessinaSansWeb-LightItalic.woff') format('woff');
 }
 
 @font-face {
-  font-family: Larsseit;
-  font-weight: 100;
-  src: url('#{$lob-assets-url}/fonts/larsseit/larsseit-thin.otf') format('opentype');
+  font-family: Messina;
+  font-style: normal;
+  font-weight: 400;
+  src: url('#{$lob-assets-url}/fonts/messina/MessinaSansWeb-Book.woff2') format('woff2'),
+    url('#{$lob-assets-url}/fonts/messina/MessinaSansWeb-Book.woff') format('woff');
 }
 
 @font-face {
-  font-family: Larsseit;
+  font-family: Messina;
   font-style: italic;
-  font-weight: 100;
-  src: url('#{$lob-assets-url}/fonts/larsseit/larsseit-thin-italic.otf') format('opentype');
+  font-weight: 400;
+  src: url('#{$lob-assets-url}/fonts/messina/MessinaSansWeb-BookItalic.woff2') format('woff2'),
+    url('#{$lob-assets-url}/fonts/messina/MessinaSansWeb-BookItalic.woff') format('woff');
 }
 
 @font-face {
-  font-family: Larsseit;
-  font-weight: 300;
-  src: url('#{$lob-assets-url}/fonts/larsseit/larsseit-light.otf') format('opentype');
+  font-family: Messina;
+  font-style: normal;
+  font-weight: 500;
+  src: url('#{$lob-assets-url}/fonts/messina/MessinaSansWeb-Regular.woff2') format('woff2'),
+    url('#{$lob-assets-url}/fonts/messina/MessinaSansWeb-Regular.woff') format('woff');
 }
-
+    
 @font-face {
-  font-family: Larsseit;
+  font-family: Messina;
   font-style: italic;
-  font-weight: 300;
-  src: url('#{$lob-assets-url}/fonts/larsseit/larsseit-light-italic.otf') format('opentype');
-}
-
-@font-face {
-  font-family: Larsseit;
-  font-weight: 400;
-  src: url('#{$lob-assets-url}/fonts/larsseit/larsseit-regular.otf') format('opentype');
+  font-weight: 500;
+  src: url('#{$lob-assets-url}/fonts/messina/MessinaSansWeb-RegularItalic.woff2') format('woff2'),
+    url('#{$lob-assets-url}/fonts/messina/MessinaSansWeb-RegularItalic.woff') format('woff');
 }
 
 @font-face {
-  font-family: Larsseit;
-  font-weight: 500;
-  src: url('#{$lob-assets-url}/fonts/larsseit/larsseit-medium.otf') format('opentype');
+  font-family: Messina;
+  font-style: normal;
+  font-weight: 600;
+  src: url('#{$lob-assets-url}/fonts/messina/MessinaSansWeb-SemiBold.woff2') format('woff2'),
+    url('#{$lob-assets-url}/fonts/messina/MessinaSansWeb-SemiBold.woff') format('woff');
 }
 
 @font-face {
-  font-family: Larsseit;
+  font-family: Messina;
   font-style: italic;
-  font-weight: 500;
-  src: url('#{$lob-assets-url}/fonts/larsseit/larsseit-medium-italic.otf') format('opentype');
+  font-weight: 600;
+  src: url('#{$lob-assets-url}/fonts/messina/MessinaSansWeb-SemiBoldItalic.woff2') format('woff2'),
+    url('#{$lob-assets-url}/fonts/messina/MessinaSansWeb-SemiBoldItalic.woff') format('woff');
 }
 
 @font-face {
-  font-family: Larsseit;
-  font-weight: bold;
-  src: url('#{$lob-assets-url}/fonts/larsseit/larsseit-bold.otf') format('opentype');
+  font-family: Messina;
+  font-style: normal;
+  font-weight: 700;
+  src: url('#{$lob-assets-url}/fonts/messina/MessinaSansWeb-Bold.woff2') format('woff2'),
+  url('#{$lob-assets-url}/fonts/messina/MessinaSansWeb-Bold.woff') format('woff');
 }
 
 @font-face {
-  font-family: Larsseit;
+  font-family: Messina;
   font-style: italic;
-  font-weight: bold;
-  src: url('#{$lob-assets-url}/fonts/larsseit/larsseit-bold-italic.otf') format('opentype');
+  font-weight: 700;
+  src: url('#{$lob-assets-url}/fonts/messina/MessinaSansWeb-BoldItalic.woff2') format('woff2'),
+    url('#{$lob-assets-url}/fonts/messina/MessinaSansWeb-BoldItalic.woff') format('woff');
 }
 
 @font-face {
-  font-family: Larsseit;
+  font-family: Messina;
+  font-style: normal;
   font-weight: 800;
-  src: url('#{$lob-assets-url}/fonts/larsseit/larsseit-extrabold.otf') format('opentype');
+  src: url('#{$lob-assets-url}/fonts/messina/MessinaSansWeb-Black.woff2') format('woff2'),
+    url('#{$lob-assets-url}/fonts/messina/MessinaSansWeb-Black.woff') format('woff');
 }
 
 @font-face {
-  font-family: Larsseit;
+  font-family: Messina;
   font-style: italic;
   font-weight: 800;
-  src: url('#{$lob-assets-url}/fonts/larsseit/larsseit-extrabold-italic.otf') format('opentype');
+  src: url('#{$lob-assets-url}/fonts/messina/MessinaSansWeb-BlackItalic.woff2') format('woff2'),
+    url('#{$lob-assets-url}/fonts/messina/MessinaSansWeb-BlackItalic.woff') format('woff');
 }
diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
@@ -14,7 +14,7 @@
   html,
   body {
     font-size: 16px;
-    @apply font-sans;
+    @apply font-messina;
     @apply text-black;
   }
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -6,6 +6,11 @@ module.exports = {
     { pattern: /text-(black|warning|error|success|lavender|chili|papaya)/ },
     { pattern: /text-(primary|secondary|lemon|turquoise|flint|mint|coral|gray|white)-(100|200|300|500|700|900)/ }
   ],
+  theme: {
+    fontFamily: {
+      messina: ['Messina', 'sans-serif']
+    }
+  },
   plugins: [
     require('tailwind-plugin-lob'),
     plugin(function ({ matchUtilities, theme }) {