feat: added typography classes

Author: ncpa0cpl

.editorconfig

@@ -3,8 +3,6 @@ root = true
 [*]
 end_of_line = lf
 insert_final_newline = true
-
-[*.{js,json,yml}]
 charset = utf-8
 indent_style = space
 indent_size = 2

docs/README.md

@@ -3,18 +3,19 @@
 ## Components
 
 1. [box](./components/box.md)
-2. [button](./components/button.md)
-3. [checkbox](./components/checkbox.md)
-4. [frame](./components/frame.md)
-5. [input](./components/input.md)
-6. [linked](./components/linked.md)
-7. [message](./components/message.md)
-8. [slider](./components/slider.md)
-9. [switch](./components/switch.md)
-10. [card](./components/card.md)
-11. [list](./components/list.md)
-12. [separator](./components/separator.md)
-13. [nav-sidebar](./components/nav-sidebar.md)
+2. [card](./components/card.md)
+3. [list](./components/list.md)
+4. [separator](./components/separator.md)
+5. [nav-sidebar](./components/nav-sidebar.md)
+6. [typography](./components/typography.md)
+7. [button](./components/button.md)
+8. [checkbox](./components/checkbox.md)
+9. [frame](./components/frame.md)
+10. [input](./components/input.md)
+11. [linked](./components/linked.md)
+12. [message](./components/message.md)
+13. [slider](./components/slider.md)
+14. [switch](./components/switch.md)
 
 ## Themes
 

docs/components/typography.md

@@ -0,0 +1,41 @@
+[go back to Docs](../README.md)
+
+# Typography
+
+## Regular text
+
+```html
+<p class="text">
+  <!-- text -->
+</p>
+```
+
+## Subtitle
+
+Subtitle is slightly smaller than regular text and is dimmer.
+
+```html
+<p class="subtitle">
+  <!-- text -->
+</p>
+```
+
+## Label
+
+Label is slightly bigger and bolder than regular text and is bolder.
+
+```html
+<p class="label">
+  <!-- text -->
+</p>
+```
+
+## Header
+
+Header is much bigger than regular text and is bolder.
+
+```html
+<p class="header">
+  <!-- text -->
+</p>
+```

src/components/typography.scss

@@ -0,0 +1,24 @@
+.text {
+  font-size: 1em;
+  font-family: "Ubuntu", sans-serif;
+  font-weight: 500;
+}
+
+.label {
+  font-size: 1.1em;
+  font-family: "Ubuntu", sans-serif;
+  font-weight: bold;
+}
+
+.subtitle {
+  font-size: 0.9em;
+  font-family: "Ubuntu", sans-serif;
+  font-weight: 500;
+  color: color("text-secondary");
+}
+
+.header {
+  font-size: 1.5em;
+  font-family: "Ubuntu", sans-serif;
+  font-weight: bold;
+}

src/main.scss

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans&family=Ubuntu:ital,wght@0,300;0,700;1,500&display=swap");
 
 @import "variables";
 @import "components/box";
@@ -14,6 +14,7 @@
 @import "components/separator";
 @import "components/slider";
 @import "components/switch";
+@import "components/typography";
 
 * {
   font-family: "Ubuntu", sans-serif;