@testgorilla/tgo-ui 0.0.18 → 0.0.21

package/src/theme/_typography.scss

@@ -0,0 +1,58 @@
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  font-weight: 700;
+}
+
+h1,
+.h1 {
+  font-size: 24px;
+}
+
+h2,
+.h2 {
+  font-size: 20px;
+  margin: 40px 0px 40px 0px;
+}
+
+h3,
+.h3 {
+  font-size: 16px;
+  margin: 0px 0px 20px 0px;
+}
+
+h4,
+.h4 {
+  font-size: 15px;
+}
+
+h5,
+.h5 {
+  font-size: 13px;
+}
+
+h6,
+.h6 {
+  font-size: 12px;
+}
+
+p {
+  line-height: 24px;
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+.mat-form-field-label {
+  font-size: 16px !important;
+  color: #888888;
+}

package/src/theme/_variables.scss

@@ -1,2 +1,4 @@
 /* global */
-$background: #ffffff;
+$background-color: #f6f6f6;
+$font-family: "Open Sans", sans-serif;
+$font-size: 14px;

package/src/theme/{base.scss → theme.scss}

@@ -1,43 +1,15 @@
 @use "palette.scss" as *;
+@use "core.scss" as *;
 @use "variables.scss" as *;
+@use "typography.scss" as *;
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
 @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
 
-body {
-  margin: 0;
-  background: $background;
-  font-size: 14px;
-  color: #888888;
-  font-family: 'Open Sans';
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  button {
-    margin-top: 16px;
-    margin-bottom: 16px;
-  }
-
-  p {
-    line-height: 24px;
-    margin-top: 16px;
-    margin-bottom: 16px;
-  }
-
-  .mat-form-field-label {
-    font-size: 16px !important;
-    color: #888888;
-  }
-}
-
+//TODO: MOVE TO THE CORRESPONDING COMPONENTS OR PARTIAL
 .hidden {
   visibility: hidden;
 }
 
-//TODO: MOVE TO THE CORRESPONDING COMPONENTS
 //custom scss for the angular material components
 .mat-card {
   border-radius: 8px !important;
@@ -119,4 +91,4 @@ mat-password-strength-info {
     margin-right: 8px;
     color: #000;
   }
-}
+}