feat: Add Plus Jakarta Font to dashboard (#7421)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/assets/javascripts/dashboardChart.js

@@ -11,7 +11,7 @@ function prepareData(data) {
 
 function getChartOptions() {
   var fontFamily =
-    'Inter,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
+    'PlusJakarta,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
   return {
     responsive: true,
     legend: { labels: { fontFamily } },

app/assets/stylesheets/administrate/library/_variables.scss

@@ -1,5 +1,5 @@
 // Typography
-$base-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+$base-font-family: PlusJakarta, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
   "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
   sans-serif !default;
 $heading-font-family: $base-font-family !default;

app/javascript/dashboard/assets/scss/_foundation-settings.scss

@@ -63,7 +63,7 @@ $black: #000;
 $white: #fff;
 $body-background: $white;
 $body-font-color: $color-body;
-$body-font-family: 'Inter',
+$body-font-family: 'PlusJakarta',
 -apple-system,
 system-ui,
 BlinkMacSystemFont,
@@ -133,7 +133,7 @@ $header-styles: (small: ("h1": ("font-size": 24),
 $header-text-rendering: optimizeLegibility;
 $small-font-size: 80%;
 $header-small-font-color: $medium-gray;
-$paragraph-lineheight: 1.45;
+$paragraph-lineheight: 1.65;
 $paragraph-margin-bottom: var(--space-small);
 $paragraph-text-rendering: optimizeLegibility;
 $code-color: $black;

app/javascript/dashboard/assets/scss/_typography.scss

@@ -29,4 +29,5 @@ a {
 
 p {
   font-size: $font-size-small;
+  word-spacing: .12em;
 }

app/javascript/dashboard/assets/scss/_woot.scss

@@ -1,4 +1,4 @@
-@import 'shared/assets/fonts/inter';
+@import 'shared/assets/fonts/plus-jakarta';
 @import 'shared/assets/stylesheets/animations';
 @import 'shared/assets/stylesheets/colors';
 @import 'shared/assets/stylesheets/spacing';

app/javascript/dashboard/assets/scss/storybook.scss

@@ -1,4 +1,5 @@
 @import 'shared/assets/fonts/inter';
+@import 'shared/assets/fonts/plus-jakarta';
 @import 'shared/assets/stylesheets/animations';
 @import 'shared/assets/stylesheets/colors';
 @import 'shared/assets/stylesheets/spacing';

app/javascript/dashboard/assets/scss/super_admin/pages.scss

@@ -1,3 +1,3 @@
-@import 'shared/assets/fonts/inter';
+@import 'shared/assets/fonts/plus-jakarta';
 @import '../variables';
 @import '~shared/assets/stylesheets/ionicons';

app/javascript/dashboard/routes/dashboard/commands/commandbar.vue

@@ -63,7 +63,7 @@ export default {
 <style>
 ninja-keys {
   --ninja-accent-color: var(--w-500);
-  --ninja-font-family: 'Inter';
+  --ninja-font-family: 'PlusJakarta';
   z-index: 9999;
 }
 </style>

app/javascript/portal/application.scss

@@ -11,7 +11,7 @@
 
 html,
 body {
-  font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   height: 100%;

app/javascript/shared/assets/fonts/plus-jakarta.scss

@@ -0,0 +1,63 @@
+@font-face {
+  font-family: 'PlusJakarta';
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url('~shared/assets/fonts/PlusJakartaSans/PlusJakartaSans-ExtraLight.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'PlusJakarta';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('~shared/assets/fonts/PlusJakartaSans/PlusJakartaSans-Light.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'PlusJakarta';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('~shared/assets/fonts/PlusJakartaSans/PlusJakartaSans-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'PlusJakarta';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('~shared/assets/fonts/PlusJakartaSans/PlusJakartaSans-Italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'PlusJakarta';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('~shared/assets/fonts/PlusJakartaSans/PlusJakartaSans-Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'PlusJakarta';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('~shared/assets/fonts/PlusJakartaSans/PlusJakartaSans-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'PlusJakarta';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('~shared/assets/fonts/PlusJakartaSans/PlusJakartaSans-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'PlusJakarta';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('~shared/assets/fonts/PlusJakartaSans/PlusJakartaSans-ExtraBold.woff2') format('woff2');
+}