Add typography variables and classes

kafka-ui-react-app/src/components/KsqlDb/List/ListItem.tsx

@@ -17,7 +17,7 @@ const ListItem: React.FC<Props> = ({ accessors, data }) => {
       <tr>
         <td>
           <span
-            className="icon has-text-link is-size-7 is-small is-clickable"
+            className="icon has-text-link 8 is-small is-clickable"
             onClick={toggleIsOpen}
             aria-hidden
           >

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Message.tsx

@@ -56,7 +56,7 @@ const Message: React.FC<{ message: TopicMessage }> = ({
       <tr>
         <td>
           <span
-            className="icon has-text-link is-size-7 is-small is-clickable"
+            className="icon has-text-link is-size-8 is-small is-clickable"
             onClick={toggleIsOpen}
             aria-hidden
           >

kafka-ui-react-app/src/components/Version/Version.tsx

@@ -33,7 +33,7 @@ const Version: React.FC<VesionProps> = ({ tag, commit }) => {
   const { outdated, latestTag } = latestVersionInfo;
 
   return (
-    <div className="is-size-7 has-text-grey">
+    <div className="is-size-8 has-text-grey">
       <span className="has-text-grey-light mr-1">Version:</span>
       <span className="mr-1">{tag}</span>
       {outdated && (

kafka-ui-react-app/src/components/Version/__tests__/__snapshots__/Version.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`Version matches snapshot 1`] = `
   tag="v1.0.1-SHAPSHOT"
 >
   <div
-    className="is-size-7 has-text-grey"
+    className="is-size-8 has-text-grey"
   >
     <span
       className="has-text-grey-light mr-1"

kafka-ui-react-app/src/theme/bulma_overrides.scss

@@ -14,8 +14,11 @@
     max-height: 73px;
     overflow: hidden;
     text-overflow: ellipsis;
-    background:
-      -webkit-linear-gradient(90deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 40%);
+    background: -webkit-linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0.1) 0%,
+      rgba(0, 0, 0, 1) 40%
+    );
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
@@ -33,7 +36,7 @@
 }
 
 .section {
-  animation: fadein .5s;
+  animation: fadein 0.5s;
 }
 
 .select.is-block select {
@@ -55,13 +58,17 @@
 }
 
 .is-family-code {
-  font-size: .9rem;
+  font-size: 0.9rem;
   line-height: 1.5em;
 }
 
 @keyframes fadein {
-  from { opacity: 0; }
-  to   { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 .level.level-multiline {
@@ -69,7 +76,11 @@
   .level-item.is-one-third {
     flex-basis: 26%;
   }
-  .level-item.is-one-third:nth-child(n+4) {
+  .level-item.is-one-third:nth-child(n + 4) {
     margin-top: 10px;
   }
 }
+
+.is-size-8 {
+  font-size: $size-8;
+}

kafka-ui-react-app/src/theme/index.scss

@@ -1,4 +1,5 @@
 @import '@fortawesome/fontawesome-free/css/all.min.css';
+@import 'src/theme/variables';
 @import 'bulma';
 @import '~bulma-switch';
 @import 'src/theme/bulma_overrides';

kafka-ui-react-app/src/theme/variables.scss

@@ -0,0 +1,3 @@
+// Typography
+$size-7: 0.875rem;
+$size-8: 0.75rem;