[TUI-60] add inter font (#375)

* [TUI-60] Added Inter font everywhere
TykTechnologies · Jul 4, 2024 · 43b78b8 · 43b78b8
1 parent 676e822
commit 43b78b8
Show file tree

Hide file tree

Showing 126 changed files with 136 additions and 28,446 deletions.
diff --git a/lib/c8df601cd07dcd5d5f41.js b/lib/c8df601cd07dcd5d5f41.js
diff --git a/lib/fonts/OpenSans-Bold.woff b/lib/fonts/OpenSans-Bold.woff
diff --git a/lib/fonts/OpenSans-Bold.woff2 b/lib/fonts/OpenSans-Bold.woff2
diff --git a/lib/fonts/OpenSans-Regular.woff b/lib/fonts/OpenSans-Regular.woff
diff --git a/lib/fonts/OpenSans-Regular.woff2 b/lib/fonts/OpenSans-Regular.woff2
diff --git a/lib/fonts/OpenSans-SemiBold.woff b/lib/fonts/OpenSans-SemiBold.woff
diff --git a/lib/fonts/OpenSans-SemiBold.woff2 b/lib/fonts/OpenSans-SemiBold.woff2
diff --git a/lib/fonts/fa-brands-400.eot b/lib/fonts/fa-brands-400.eot
diff --git a/lib/fonts/fa-brands-400.svg b/lib/fonts/fa-brands-400.svg
diff --git a/lib/fonts/fa-brands-400.ttf b/lib/fonts/fa-brands-400.ttf
diff --git a/lib/fonts/fa-brands-400.woff b/lib/fonts/fa-brands-400.woff
diff --git a/lib/fonts/fa-brands-400.woff2 b/lib/fonts/fa-brands-400.woff2
diff --git a/lib/fonts/fa-regular-400.eot b/lib/fonts/fa-regular-400.eot
diff --git a/lib/fonts/fa-regular-400.svg b/lib/fonts/fa-regular-400.svg
diff --git a/lib/fonts/fa-regular-400.ttf b/lib/fonts/fa-regular-400.ttf
diff --git a/lib/fonts/fa-regular-400.woff b/lib/fonts/fa-regular-400.woff
diff --git a/lib/fonts/fa-regular-400.woff2 b/lib/fonts/fa-regular-400.woff2
diff --git a/lib/fonts/fa-solid-900.eot b/lib/fonts/fa-solid-900.eot
diff --git a/lib/fonts/fa-solid-900.svg b/lib/fonts/fa-solid-900.svg
diff --git a/lib/fonts/fa-solid-900.ttf b/lib/fonts/fa-solid-900.ttf
diff --git a/lib/fonts/fa-solid-900.woff b/lib/fonts/fa-solid-900.woff
diff --git a/lib/fonts/fa-solid-900.woff2 b/lib/fonts/fa-solid-900.woff2
diff --git a/lib/fonts/smoolthan_bold-webfont.woff b/lib/fonts/smoolthan_bold-webfont.woff
diff --git a/lib/fonts/smoolthan_bold-webfont.woff2 b/lib/fonts/smoolthan_bold-webfont.woff2
diff --git a/lib/fonts/smoolthan_medium-webfont.woff b/lib/fonts/smoolthan_medium-webfont.woff
diff --git a/lib/fonts/smoolthan_medium-webfont.woff2 b/lib/fonts/smoolthan_medium-webfont.woff2
diff --git a/lib/fonts/smoolthan_regular-webfont.woff b/lib/fonts/smoolthan_regular-webfont.woff
diff --git a/lib/fonts/smoolthan_regular-webfont.woff2 b/lib/fonts/smoolthan_regular-webfont.woff2
diff --git a/lib/index.css b/lib/index.css
diff --git a/lib/index.css.map b/lib/index.css.map
diff --git a/lib/index.js b/lib/index.js
diff --git a/lib/index.js.map b/lib/index.js.map
diff --git a/lib/sass/common/sass/variables.scss b/lib/sass/common/sass/variables.scss
@@ -54,7 +54,7 @@ $text-color: #505071 !default;
 $label-color: theme-color('default', 'base') !default;
 
 $xs-line-height: 16px;
-$sm-line-height: 19px;
+$sm-line-height: 20px;
 $md-line-height: 22px;
 $lg-line-height: 23px;
 $xl-line-height: 24px;
@@ -65,7 +65,7 @@ $sm-font-size: 14px;
 $md-font-size: 16px;
 $lg-font-size: 18px;
 $xl-font-size: 20px;
-$xxl-font-size: 25px;
+$xxl-font-size: 32px;
 
 $base-font-size: $sm-font-size !default;
 $base-line-height: $sm-line-height !default;
@@ -106,26 +106,28 @@ $spacing: (
   'sm': 10px,
   'base': 15px,
   'md': 20px,
-  'lg': 25px,
+  'lg': 24px,
   'xl': 30px,
-  'xxl': 40px
+  'xxl': 36px
 ) !default;
 
 $grid-gutter: map.get($spacing, 'md') !default;
 $grid-max-width: 1200px + ($grid-gutter * 2) !default;
 $grid-columns: 12 !default;
 
-$font-family-regular: 'OpenSans-regular' !default;
-$font-family-medium: 'OpenSans-SemiBold' !default;
-$font-family-bold: 'OpenSans-Bold' !default;
+$font-family-regular: 'Inter-Regular' !default;
+$font-family-medium: 'Inter-Medium' !default;
+$font-family-semi-bold: 'Inter-SemiBold' !default;
+$font-family-bold: 'Inter-Bold' !default;
 
 $headings-color: #36364C !default;
-$headings-font-family-regular: 'smoolthan_regular' !default;
-$headings-font-family-medium: 'smoolthan_medium' !default;
-$headings-font-family-bold: 'smoolthan_bold' !default;
+$headings-font-family-regular: 'Inter-Regular' !default;
+$headings-font-family-medium: 'Inter-Medium' !default;
+$headings-font-family-semi-bold: 'Inter-SemiBold' !default;
+$headings-font-family-bold: 'Inter-Bold' !default;
 
 $headings-margin-bottom: 15px !default;
-$headings-font-family: $headings-font-family-medium !default;
+$headings-font-family: $headings-font-family-bold !default;
 $headings-font-weight: 500 !default;
 $headings-line-height: $base-line-height !default;
 

diff --git a/lib/tyk-ui.css b/lib/tyk-ui.css
diff --git a/lib/tyk-ui.css.map b/lib/tyk-ui.css.map
diff --git a/lib/tyk-ui.js b/lib/tyk-ui.js
diff --git a/lib/tyk-ui.js.map b/lib/tyk-ui.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tyk-technologies/tyk-ui",
-  "version": "4.1.1",
+  "version": "4.2.0-alpha6",
   "description": "Tyk UI - ui reusable components",
   "main": "src/index.js",
   "scripts": {

diff --git a/src/common/css/fonts.css b/src/common/css/fonts.css
@@ -38,54 +38,6 @@
   font-style: normal;
 }
 
-@font-face {
-  font-family: OpenSans-Bold;
-  src: url('../fonts/OpenSans-Bold.woff2') format('woff2'),
-       url('../fonts/OpenSans-Bold.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: OpenSans-SemiBold;
-  src: url('../fonts/OpenSans-SemiBold.woff2') format('woff2'),
-       url('../fonts/OpenSans-SemiBold.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: OpenSans-Regular;
-  src: url('../fonts/OpenSans-Regular.woff2') format('woff2'),
-       url('../fonts/OpenSans-Regular.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'smoolthan_bold';
-  src: url('../fonts/smoolthan_bold-webfont.woff2') format('woff2'),
-       url('../fonts/smoolthan_bold-webfont.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'smoolthan_medium';
-  src: url('../fonts/smoolthan_medium-webfont.woff2') format('woff2'),
-       url('../fonts/smoolthan_medium-webfont.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'smoolthan_regular';
-  src: url('../fonts/smoolthan_regular-webfont.woff2') format('woff2'),
-       url('../fonts/smoolthan_regular-webfont.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-
 @font-face {
   font-family: tykon;
   src: url('../fonts/tykon.woff2') format('woff2'),

diff --git a/src/common/css/form.css b/src/common/css/form.css
@@ -26,7 +26,7 @@
   }
 
   label {
-    font-family: var(--font-family-medium);
+    font-family: var(--font-family-bold);
   }
 }
 

diff --git a/src/common/css/typography.css b/src/common/css/typography.css
@@ -1,7 +1,6 @@
 h1, h2, h3, h4, h5, h6 {
   margin-block-end: var(--headings-margin-bottom);
   font-family: var(--headings-font-family);
-  font-weight: var(--headings-font-weight);
   color: var(--headings-color);
 }
 
@@ -19,12 +18,12 @@ h1 {
 
 h2 {
   font-size: var(--xl-font-size);
-  line-height: var(--xl-line-height);
+  line-height: var(--lg-line-height);
 }
 
 h3 {
   font-size: var(--lg-font-size);
-  line-height: var(--lg-line-height);
+  line-height: var(--xl-line-height);
 }
 
 h4 {
@@ -34,7 +33,7 @@ h4 {
 
 h5 {
   font-size: var(--sm-font-size);
-  line-height: var(--sm-line-height);
+  line-height: var(--md-line-height);
 }
 
 h6 {
@@ -62,6 +61,7 @@ a:not(.tyk-button) {
   cursor: pointer;
   color: var(--text-color);
   font-family: var(--font-family-regular);
+  text-decoration: underline;
 
   &.link--bold {
     font-family: var(--font-family-bold);
@@ -77,15 +77,15 @@ a:not(.tyk-button) {
 }
 
 .font-family-regular {
-  font-family: var(--font-family-regular);
+  font-family: var(--font-family-regular) !important;
 }
 
 .font-family-medium {
-  font-family: var(--font-family-medium);
+  font-family: var(--font-family-medium) !important;
 }
 
 .font-family-bold {
-  font-family: var(--font-family-bold);
+  font-family: var(--font-family-bold) !important;
 }
 
 .heading-font-family-regular {
@@ -155,7 +155,6 @@ td.text-ellipsis {
 }
 
 .section-title {
-  font-family: var(--headings-font-family-bold);
   margin-block-end: 5px;
 
   .tyk-icon {
@@ -165,9 +164,6 @@ td.text-ellipsis {
 
 .sub-section-title {
   margin-block-end: 5px;
-  font-family: var(--font-family-medium);
-  font-size: var(--md-font-size);
-  line-height: var(--md-line-height);
 
   .tyk-icon {
     margin-inline-start: 5px;
@@ -176,9 +172,6 @@ td.text-ellipsis {
 
 .section-group-title {
   margin-block-end: 5px;
-  font-family: var(--font-family-bold);
-  font-size: var(--sm-font-size);
-  line-height: var(--sm-line-height);
   text-transform: uppercase;
 
   .tyk-icon {

diff --git a/src/common/css/variables.css b/src/common/css/variables.css
@@ -35,7 +35,7 @@
   --label-color: var(--color-default-base);
 
   --xs-line-height: 16px;
-  --sm-line-height: 19px;
+  --sm-line-height: 20px;
   --md-line-height: 22px;
   --lg-line-height: 23px;
   --xl-line-height: 24px;
@@ -46,7 +46,7 @@
   --md-font-size: 16px;
   --lg-font-size: 18px;
   --xl-font-size: 20px;
-  --xxl-font-size: 25px;
+  --xxl-font-size: 32px;
 
   --base-font-size: var(--sm-font-size);
   --base-line-height: var(--sm-line-height);
@@ -55,9 +55,9 @@
   --spacing-sm: 10px;
   --spacing-base: 15px;
   --spacing-md: 20px;
-  --spacing-lg: 25px;
+  --spacing-lg: 24px;
   --spacing-xl: 30px;
-  --spacing-xxl: 40px;
+  --spacing-xxl: 36px;
 
   --grid-gutter: var(--spacing-md);
   --grid-max-width: calc(1200px + var(--grid-gutter) * 2);
@@ -71,18 +71,20 @@
   --font-inter-medium: 'Inter-Medium';
   --font-inter-regular: 'Inter-Regular';
   --font-inter-bold: 'Inter-Bold';
+  --font-inter-semi-bold: 'Inter-SemiBold';
 
-  --font-family-regular: 'OpenSans-regular';
-  --font-family-medium: 'OpenSans-SemiBold';
-  --font-family-bold: 'OpenSans-Bold';
+  --font-family-regular: var(--font-inter-regular);
+  --font-family-medium: var(--font-inter-medium);
+  --font-family-semi-bold: var(--font-inter-semi-bold);
+  --font-family-bold: var(--font-inter-bold);
 
   --headings-color: var(--color-default-base);
-  --headings-font-family-regular: 'smoolthan_regular';
-  --headings-font-family-medium: 'smoolthan_medium';
-  --headings-font-family-bold: 'smoolthan_bold';
+  --headings-font-family-regular: var(--font-inter-regular);
+  --headings-font-family-medium: var(--font-inter-medium);
+  --headings-font-family-bold: var(--font-inter-bold);
 
   --headings-margin-bottom: 15px;
-  --headings-font-family: var(--headings-font-family-medium);
+  --headings-font-family: var(--headings-font-family-bold);
   --headings-font-weight: 500;
   --headings-line-height: var(--base-line-height);
 

diff --git a/src/common/fonts/OpenSans-Bold.eot b/src/common/fonts/OpenSans-Bold.eot
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,7 +26,7 @@ @@
       }
       label {
-        font-family: var(--font-family-medium);
+        font-family: var(--font-family-bold);
       }
     }
@@ Expand Down @@