chore: make theming and ui docs a little nicer

Author: Byson94

docs/library/library.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 3.5
+sidebar_position: 4
 ---
 
 # Library

docs/theming_and_ui/styling_widgets.md

@@ -12,28 +12,7 @@ When creating your ewwii config, always make sure to add this at the top of your
 
 It gets rid of the Gtk theming and allows you to style your own widgets.
 
-## In-Line
-
-Ewwii allows writing inline styles to widgets using the `style` property. These styles are then applied at runtime using GTK's CSS system.
-
-**Example:**
-
-```nbcl
-# This example makes the text color of all child
-# widgets of box to black and sets the background 
-# color of the box to white 
-# (`#fff` is the hexadecimal for white).
-
-Box {
-  style = "color: black; background-color: #fff;"
-
-  Label {
-    text = "baz"
-  }
-}
-```
-
-## (S)CSS
+## Styling in SCSS/CSS
 
 To style a widget in (s)css, you can give that widget a class and access it using its class in (s)css.
 
@@ -55,3 +34,28 @@ This box is given the class `my-box`, and it can be accessed like so in (s)css:
     background-color: white;
 }
 ```
+
+- You can read a bit more about Gtk Theming in [Working With GTK](./working_with_gtk#gtk-theming).
+- Or see [GTK CSS Properties Overview wiki](https://docs.gtk.org/gtk4/css-properties.html) directly.
+
+## Recommended Practice
+
+It is recommended to use variables to set styling of components. It is highly reusable and will give you an easier time.
+
+```css
+/* Example */
+:root {
+    --bg-surface: #1e1e2e;
+    --bg-card: #252538;
+    --border-color: #111111;
+    --fg-bright: #cdd6f4;
+    --fg-default: #a6adc8;
+    --fg-muted: #bac2de;
+    --accent: #cba6f7;
+    --critical: #f38ba8;
+    --success: #a6e3a1;
+}
+```
+
+Following the same naming is also recommended (optional) as Ewwii plugins related with CSS are likely to follow 
+the same naming convention.

docs/theming_and_ui/theming_and_ui.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 4
+sidebar_position: 3.5
 ---
 
 # Theming & UI

docs/theming_and_ui/working_with_gtk.md

@@ -2,15 +2,14 @@
 
 ## Gtk Theming
 
-Ewwii is styled in GTK CSS.
+As mentioned in [Styling Widgets](./styling_widgets#styling-in-scsscss), ewwii is styled in GTK CSS.
 You can use `Vanilla CSS` or `SCSS` to make theming even easier. The latter is compiled into CSS for you.
-If you don't know any way to style something check out the [GTK CSS Overview wiki](https://docs.gtk.org/gtk3/css-overview.html),
-the [GTK CSS Properties Overview wiki ](https://docs.gtk.org/gtk3/css-properties.html),
+If you don't know any way to style something check out the 
+[GTK CSS Properties Overview wiki](https://docs.gtk.org/gtk4/css-properties.html), 
 or use the [GTK-Debugger](#gtk-debugger).
 
-If you have **NO** clue about how to do CSS, check out some online guides or tutorials.
-
-SCSS is _very_ close to CSS, so if you know CSS you'll have no problem learning SCSS.
+- If you have **NO** clue about how to do CSS, check out some online guides or tutorials.
+- SCSS is _very_ close to CSS, so if you know CSS you'll have no problem learning SCSS.
 
 ## GTK Debugger