HZC-5159: add self hosted fonts (#503)

* add self hosted fonts * add self hosted fonts
hazelcast · Aug 7, 2023 · 9051e8e · 9051e8e
1 parent cb2f7b9
commit 9051e8e
Show file tree

Hide file tree

Showing 59 changed files with 40,487 additions and 671 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/icons/.storybook/theme.js b/packages/icons/.storybook/theme.js
@@ -15,7 +15,7 @@ export const customTheme = create({
   appBorderRadius: 3,
 
   // Typography
-  fontBase: "'Open Sans', 'Roboto', 'Helvetica', 'Arial', sans-serif",
+  fontBase: "'Open Sans', 'PP Telegraf', 'Helvetica', 'Arial', sans-serif",
   fontCode: 'sans-serif',
 
   // Text colors

diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Card_Simple.png b/packages/ui/.loki/reference/chrome_minimal_Components_Card_Simple.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Card_With_Caption.png b/packages/ui/.loki/reference/chrome_minimal_Components_Card_With_Caption.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Card_With_Custom_Styling.png b/packages/ui/.loki/reference/chrome_minimal_Components_Card_With_Custom_Styling.png
diff --git a/...ages/ui/.loki/reference/chrome_minimal_Components_Card_With_Heading_Content.png b/...ages/ui/.loki/reference/chrome_minimal_Components_Card_With_Heading_Content.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Card_With_Icon.png b/packages/ui/.loki/reference/chrome_minimal_Components_Card_With_Icon.png
diff --git a/...s/ui/.loki/reference/chrome_minimal_Components_Card_With_Icon_And_Separator.png b/...s/ui/.loki/reference/chrome_minimal_Components_Card_With_Icon_And_Separator.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Card_With_Separator.png b/packages/ui/.loki/reference/chrome_minimal_Components_Card_With_Separator.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Card_Without_Content.png b/packages/ui/.loki/reference/chrome_minimal_Components_Card_Without_Content.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Dialog_Default.png b/packages/ui/.loki/reference/chrome_minimal_Components_Dialog_Default.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Dialog_Long.png b/packages/ui/.loki/reference/chrome_minimal_Components_Dialog_Long.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Dialog_With_Action.png b/packages/ui/.loki/reference/chrome_minimal_Components_Dialog_With_Action.png
diff --git a/...es/ui/.loki/reference/chrome_minimal_Components_Dialog_With_Action_Disabled.png b/...es/ui/.loki/reference/chrome_minimal_Components_Dialog_With_Action_Disabled.png
diff --git a/...ages/ui/.loki/reference/chrome_minimal_Components_Dialog_With_Danger_Action.png b/...ages/ui/.loki/reference/chrome_minimal_Components_Dialog_With_Danger_Action.png
diff --git a/...loki/reference/chrome_minimal_Components_Dialog_With_Danger_Action_Disabled.png b/...loki/reference/chrome_minimal_Components_Dialog_With_Danger_Action_Disabled.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Modal_Default.png b/packages/ui/.loki/reference/chrome_minimal_Components_Modal_Default.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Modal_Long_Content.png b/packages/ui/.loki/reference/chrome_minimal_Components_Modal_Long_Content.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Modal_Not_Closable.png b/packages/ui/.loki/reference/chrome_minimal_Components_Modal_Not_Closable.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Modal_Small_Variant.png b/packages/ui/.loki/reference/chrome_minimal_Components_Modal_Small_Variant.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Modal_With_Action.png b/packages/ui/.loki/reference/chrome_minimal_Components_Modal_With_Action.png
diff --git a/...ges/ui/.loki/reference/chrome_minimal_Components_Modal_With_Action_Disabled.png b/...ges/ui/.loki/reference/chrome_minimal_Components_Modal_With_Action_Disabled.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Modal_With_Danger_Action.png b/packages/ui/.loki/reference/chrome_minimal_Components_Modal_With_Danger_Action.png
diff --git a/....loki/reference/chrome_minimal_Components_Modal_With_Danger_Action_Disabled.png b/....loki/reference/chrome_minimal_Components_Modal_With_Danger_Action_Disabled.png
diff --git a/...i/.loki/reference/chrome_minimal_Components_Modal_With_Hidden_Modal_Actions.png b/...i/.loki/reference/chrome_minimal_Components_Modal_With_Hidden_Modal_Actions.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Modal_With_Icon.png b/packages/ui/.loki/reference/chrome_minimal_Components_Modal_With_Icon.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Modal_With_Long_Title.png b/packages/ui/.loki/reference/chrome_minimal_Components_Modal_With_Long_Title.png
diff --git a/...es/ui/.loki/reference/chrome_minimal_Components_Modal_With_Multiple_Actions.png b/...es/ui/.loki/reference/chrome_minimal_Components_Modal_With_Multiple_Actions.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Default.png b/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Default.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Fullscreen.png b/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Fullscreen.png
diff --git a/...rence/chrome_minimal_Components_Overlay_Fullscreen_With_Full_Height_Content.png b/...rence/chrome_minimal_Components_Overlay_Fullscreen_With_Full_Height_Content.png
diff --git a/...ki/reference/chrome_minimal_Components_Overlay_Fullscreen_With_Long_Content.png b/...ki/reference/chrome_minimal_Components_Overlay_Fullscreen_With_Long_Content.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Not_Closable.png b/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Not_Closable.png
diff --git a/...ges/ui/.loki/reference/chrome_minimal_Components_Overlay_Without_Close_Text.png b/...ges/ui/.loki/reference/chrome_minimal_Components_Overlay_Without_Close_Text.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Without_Title.png b/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Without_Title.png
diff --git a/packages/ui/.storybook/main.js b/packages/ui/.storybook/main.js
@@ -2,7 +2,7 @@ const path = require('path')
 
 module.exports = {
   stories: ['../**/*.stories.@(tsx|mdx)'],
-  staticDirs: ['../assets'],
+  staticDirs: ['../assets', '../styles'],
   addons: [
     {
       name: '@storybook/preset-scss',

diff --git a/packages/ui/.storybook/preview-head.html b/packages/ui/.storybook/preview-head.html
@@ -1,51 +1,2 @@
-<style type="text/css">
-/* roboto-400 */
-@font-face {
-  font-family: Roboto;
-  font-style: normal;
-  font-weight: 400;
-  src: url('./fonts/roboto-v27-latin-regular.woff2') format('woff2'), url('./fonts/roboto-v27-latin-regular.woff') format('woff'),
-    url('./fonts/roboto-v27-latin-regular.ttf') format('truetype'), url('./fonts/roboto-v27-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
-}
-
-/* roboto-500 */
-@font-face {
-  font-family: Roboto;
-  font-style: normal;
-  font-weight: 500;
-  src: url('./fonts/roboto-v27-latin-500.woff2') format('woff2'), url('./fonts/roboto-v27-latin-500.woff') format('woff'),
-    url('./fonts/roboto-v27-latin-500.ttf') format('truetype'), url('./fonts/roboto-v27-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
-}
-
-/* open sans-400 */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  src: url('./fonts/OpenSans-Regular.woff2') format('woff2');
-}
-
-/* open sans-400 */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 400;
-  src: url('./fonts/OpenSans-Italic.woff2') format('woff2');
-}
-
-/* open sans-600 */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 600;
-  src: url('./fonts/OpenSans-SemiBold.woff2') format('woff2');
-}
-
-/* open sans-600 */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 600;
-  src: url('./fonts/OpenSans-SemiBoldItalic.woff2') format('woff2');
-}
-</style>
+<link rel='stylesheet' type="text/css" href='./typography/open-sans.css'>
+<link rel='stylesheet' type="text/css" href='./typography/pp-telegraf.css'>
diff --git a/packages/ui/.storybook/theme.js b/packages/ui/.storybook/theme.js
@@ -15,7 +15,7 @@ export const customTheme = create({
   appBorderRadius: 3,
 
   // Typography
-  fontBase: "'Open Sans', 'Roboto', 'Helvetica', 'Arial', sans-serif",
+  fontBase: "'Open Sans', 'PP Telegraf', 'Helvetica', 'Arial', sans-serif",
   fontCode: 'sans-serif',
 
   // Text colors

diff --git a/packages/ui/__stories__/Typography.stories.mdx b/packages/ui/__stories__/Typography.stories.mdx
@@ -16,7 +16,7 @@ export const getSampleText = (letterSpacing) => (
 
 ## Headings
 
-**Font:** Roboto
+**Font:** PP Telegraf
 
 **Weight:** regular
 
@@ -32,7 +32,7 @@ export const getSampleText = (letterSpacing) => (
   fontFamily={styleConsts.fontFamilyHeading}
 />
 
-**Font:** Roboto
+**Font:** PP Telegraf
 
 **Weight:** bold
 
@@ -74,4 +74,4 @@ export const getSampleText = (letterSpacing) => (
   fontWeight={styleConsts.fontWeightTextBold}
   sampleText={getSampleText()}
   fontFamily={styleConsts.fontFamilyText}
-/>
+/>
diff --git a/packages/ui/assets/fonts/roboto-v27-latin-500.svg b/packages/ui/assets/fonts/roboto-v27-latin-500.svg
diff --git a/packages/ui/assets/fonts/roboto-v27-latin-500.ttf b/packages/ui/assets/fonts/roboto-v27-latin-500.ttf
diff --git a/packages/ui/assets/fonts/roboto-v27-latin-500.woff b/packages/ui/assets/fonts/roboto-v27-latin-500.woff
diff --git a/packages/ui/assets/fonts/roboto-v27-latin-500.woff2 b/packages/ui/assets/fonts/roboto-v27-latin-500.woff2
diff --git a/packages/ui/assets/fonts/roboto-v27-latin-regular.svg b/packages/ui/assets/fonts/roboto-v27-latin-regular.svg
diff --git a/packages/ui/assets/fonts/roboto-v27-latin-regular.ttf b/packages/ui/assets/fonts/roboto-v27-latin-regular.ttf
diff --git a/packages/ui/assets/fonts/roboto-v27-latin-regular.woff b/packages/ui/assets/fonts/roboto-v27-latin-regular.woff
diff --git a/packages/ui/assets/fonts/roboto-v27-latin-regular.woff2 b/packages/ui/assets/fonts/roboto-v27-latin-regular.woff2
diff --git a/packages/ui/styles/constants/_typography.scss b/packages/ui/styles/constants/_typography.scss
@@ -1,4 +1,4 @@
-$fontFamilyHeading: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
+$fontFamilyHeading: 'PP Telegraf', 'Helvetica', 'Arial', sans-serif !default;
 $fontWeightHeadingRegular: 400 !default;
 $fontWeightHeadingBold: 500 !default;
 $fontFamilyText: 'Open Sans', 'Helvetica', 'Arial', sans-serif !default;

diff --git a/packages/ui/assets/fonts/LICENSE.txt → ...es/ui/styles/typography/fonts/LICENSE.txt b/packages/ui/assets/fonts/LICENSE.txt → ...es/ui/styles/typography/fonts/LICENSE.txt
diff --git a/...ges/ui/assets/fonts/OpenSans-Italic.woff2 → ...es/typography/fonts/OpenSans-Italic.woff2 b/...ges/ui/assets/fonts/OpenSans-Italic.woff2 → ...es/typography/fonts/OpenSans-Italic.woff2
diff --git a/...es/ui/assets/fonts/OpenSans-Regular.woff2 → ...s/typography/fonts/OpenSans-Regular.woff2 b/...es/ui/assets/fonts/OpenSans-Regular.woff2 → ...s/typography/fonts/OpenSans-Regular.woff2
diff --git a/...s/ui/assets/fonts/OpenSans-SemiBold.woff2 → .../typography/fonts/OpenSans-SemiBold.woff2 b/...s/ui/assets/fonts/OpenSans-SemiBold.woff2 → .../typography/fonts/OpenSans-SemiBold.woff2
diff --git a/...ssets/fonts/OpenSans-SemiBoldItalic.woff2 → ...raphy/fonts/OpenSans-SemiBoldItalic.woff2 b/...ssets/fonts/OpenSans-SemiBoldItalic.woff2 → ...raphy/fonts/OpenSans-SemiBoldItalic.woff2
diff --git a/packages/ui/styles/typography/fonts/PPTelegraf-Light.woff2 b/packages/ui/styles/typography/fonts/PPTelegraf-Light.woff2
diff --git a/packages/ui/styles/typography/fonts/PPTelegraf-Medium.woff2 b/packages/ui/styles/typography/fonts/PPTelegraf-Medium.woff2
diff --git a/packages/ui/styles/typography/fonts/PPTelegraf-RegularSlanted.woff2 b/packages/ui/styles/typography/fonts/PPTelegraf-RegularSlanted.woff2
diff --git a/packages/ui/styles/typography/fonts/PPTelegraf-UltralightSlanted.woff2 b/packages/ui/styles/typography/fonts/PPTelegraf-UltralightSlanted.woff2
diff --git a/packages/ui/styles/typography/open-sans.css b/packages/ui/styles/typography/open-sans.css
@@ -0,0 +1,35 @@
+/* open sans-400 */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./fonts/OpenSans-Regular.woff2') format('woff2');
+}
+
+/* open sans-400 */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./fonts/OpenSans-Italic.woff2') format('woff2');
+}
+
+/* open sans-600 */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./fonts/OpenSans-SemiBold.woff2') format('woff2');
+}
+
+/* open sans-600 */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./fonts/OpenSans-SemiBoldItalic.woff2') format('woff2');
+}
diff --git a/packages/ui/styles/typography/pp-telegraf.css b/packages/ui/styles/typography/pp-telegraf.css
@@ -0,0 +1,31 @@
+@font-face {
+  font-family: 'PP Telegraf';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('./fonts/PPTelegraf-Light.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'PP Telegraf';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 400;
+  src: url('./fonts/PPTelegraf-UltralightSlanted.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'PP Telegraf';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url('./fonts/PPTelegraf-Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'PP Telegraf';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 500;
+  src: url('./fonts/PPTelegraf-RegularSlanted.woff2') format('woff2');
+}