[WIP] Font

docs/README.md

@@ -22,11 +22,11 @@ React packages such as Redux still work.
 
 ## Features
 
-- Same syntax as React Native
-- Works with existing React libraries such as Redux
-- Cross platform
-- Native components. No more Electron
-- Compatible with all normal Node.js packages
+* Same syntax as React Native
+* Works with existing React libraries such as Redux
+* Cross platform
+* Native components. No more Electron
+* Compatible with all normal Node.js packages
 
 ## Examples
 

docs/_coverpage.md

@@ -40,7 +40,7 @@
         text-decoration: none;
         transition: all 0.15s ease;
     }
-</style>    
+</style>
 
 <a href='https://github.com/kusti8/proton-native' id="but">Github</a>
 <a href='#/?id=proton-native' id="last">Get Started</a>
@@ -53,4 +53,4 @@
 <li>Compatible with all normal Node.js packages <li/>
 </ul>
 
-![color](linear-gradient(to left bottom, #2e4466 0%, #afc1e0 100%))
+![color](linear-gradient(to left bottom, #2e4466 0%, #afc1e0 100%))

docs/_sidebar.md

@@ -9,13 +9,14 @@
   * [App](component_APIs/app.md)
   * [Area](component_APIs/area.md)
     * [Props](component_APIs/area_props.md)
+    * [Area.Arc](component_APIs/area_arc.md)
+    * [Area.Bezier](component_APIs/area_bezier.md)
+    * [Area.Circle](component_APIs/area_circle.md)
     * [Area.Group](component_APIs/area_group.md)
-    * [Area.Rectangle](component_APIs/area_rectangle.md)
     * [Area.Line](component_APIs/area_line.md)
-    * [Area.Circle](component_APIs/area_circle.md)
-    * [Area.Arc](component_APIs/area_bezier.md)
-    * [Area.Bezier](component_APIs/area_bezier.md)
     * [Area.Path](component_APIs/area_path.md)
+    * [Area.Rectangle](component_APIs/area_rectangle.md)
+    * [Area.Text](component_APIs/area_text.md)
   * [Box](component_APIs/box.md)
   * [Button](component_APIs/button.md)
   * [Checkbox](component_APIs/checkbox.md)
@@ -32,6 +33,7 @@
   * [Separator](component_APIs/separator.md)
   * [Slider](component_APIs/slider.md)
   * [Spinbox](component_APIs/spinbox.md)
+  * [StyledText](component_APIs/styledtext.md)
   * [Tab](component_APIs/tab.md)
   * [Text](component_APIs/text.md)
   * [TextInput](component_APIs/textinput.md)

docs/about.md

@@ -6,14 +6,16 @@ technologies, Proton Native allows you to use native widgets cross platform, all
 Electron.
 
 **Advantages**
- * Use native OS widgets
- * All widgets are created and handled in C, making for generally better performance (YMMV, especially in smaller apps)
- * Simple React components very similar to React Native components
- * Constantly being improved and added to
+
+* Use native OS widgets
+* All widgets are created and handled in C, making for generally better performance (YMMV, especially in smaller apps)
+* Simple React components very similar to React Native components
+* Constantly being improved and added to
 
 **Disadvantages**
- * Smaller selection of widgets than Electron
- * Smaller community since Proton Native is newer
+
+* Smaller selection of widgets than Electron
+* Smaller community since Proton Native is newer
 
 If you've been using Qt or frameworks like that successfully, then you may do so. But if you love working with React like I do,
 then Proton Native may be your best alternate to a full Electron app.
@@ -33,9 +35,9 @@ As your projects get bigger and bigger, you're going to notice more memory usage
 Under the hood, there are two main libraries that are being used.
 
 * [Libui](https://github.com/andlabs/libui)/[Libui-node](https://github.com/parro-it/libui-node)
-    * Creates the native widgets using GTK3, Cocoa, or Windows API
+  * Creates the native widgets using GTK3, Cocoa, or Windows API
 * [React-reconciler](https://github.com/facebook/react/tree/master/packages/react-reconciler)
-    * Manages state, rerendering, etc.
+  * Manages state, rerendering, etc.
 
 Each libui widget has a corresponding component in `src/components`. All of these are classes, which extend `DesktopComponent`,
 which defines many common functions such as adding children, removing them, updating props, etc. Then, in `src/index.js`, we give

docs/component_APIs/area_arc.md

@@ -46,38 +46,38 @@ render(<Example />);
 
 The x coordinate of the center of the arc.
 
-| **Type**                  | **Required** |
-| ------------------------- | ------------ |
-| number \| string (number) | true         |
+| **Type**                      | **Required** |
+| ----------------------------- | ------------ |
+| number &#x7c; string (number) | true         |
 
 ### y
 
 The y coordinate of the center of the arc.
 
-| **Type**                  | **Required** |
-| ------------------------- | ------------ |
-| number \| string (number) | true         |
+| **Type**                      | **Required** |
+| ----------------------------- | ------------ |
+| number &#x7c; string (number) | true         |
 
 ### r
 
 The arc's radius. Percentage values use the Area's width.
 
-| **Type**                  | **Required** |
-| ------------------------- | ------------ |
-| number \| string (number) | true         |
+| **Type**                      | **Required** |
+| ----------------------------- | ------------ |
+| number &#x7c; string (number) | true         |
 
 ### start
 
 The start angle of the arc in degrees. Value increases clockwise with `0` meaning the rightmost point ("east") of the imaginary circle.
 
-| **Type**                  | **Required** | **Default** |
-| ------------------------- | ------------ | ----------- |
-| number \| string (number) | false        | 0           |
+| **Type**                      | **Required** | **Default** |
+| ----------------------------- | ------------ | ----------- |
+| number &#x7c; string (number) | false        | 0           |
 
 ### sweep
 
 The sweep angle of the arc in degrees. Value increases clockwise.
 
-| **Type**                  | **Required** |
-| ------------------------- | ------------ |
-| number \| string (number) | true         |
+| **Type**                      | **Required** |
+| ----------------------------- | ------------ |
+| number &#x7c; string (number) | true         |

docs/component_APIs/area_bezier.md

@@ -53,62 +53,62 @@ render(<Example />);
 
 The x coordinate of the curve's start point.
 
-| **Type**                  | **Required** |
-| ------------------------- | ------------ |
-| number \| string (number) | true         |
+| **Type**                      | **Required** |
+| ----------------------------- | ------------ |
+| number &#x7c; string (number) | true         |
 
 ### y1
 
 The y coordinate of the curve's start point.
 
-| **Type**                  | **Required** |
-| ------------------------- | ------------ |
-| number \| string (number) | true         |
+| **Type**                      | **Required** |
+| ----------------------------- | ------------ |
+| number &#x7c; string (number) | true         |
 
 ### cx1
 
 The x coordinate of the curve's control point at the start.
 
-| **Type**                  | **Required** |
-| ------------------------- | ------------ |
-| number \| string (number) | true         |
+| **Type**                      | **Required** |
+| ----------------------------- | ------------ |
+| number &#x7c; string (number) | true         |
 
 ### cy1
 
 The y coordinate of the curve's control point at the start.
 
-| **Type**                  | **Required** |
-| ------------------------- | ------------ |
-| number \| string (number) | true         |
+| **Type**                      | **Required** |
+| ----------------------------- | ------------ |
+| number &#x7c; string (number) | true         |
 
 ### x2
 
 The x coordinate of the curve's end point.
 
-| **Type**                  | **Required** |
-| ------------------------- | ------------ |
-| number \| string (number) | true         |
+| **Type**                      | **Required** |
+| ----------------------------- | ------------ |
+| number &#x7c; string (number) | true         |
 
 ### y2
 
 The y coordinate of the curve's end point.
 
-| **Type**                  | **Required** |
-| ------------------------- | ------------ |
-| number \| string (number) | true         |
+| **Type**                      | **Required** |
+| ----------------------------- | ------------ |
+| number &#x7c; string (number) | true         |
 
 ### cx2
 
 The x coordinate of the curve's control point at the end.
 
-| **Type**                  | **Required** |
-| ------------------------- | ------------ |
-| number \| string (number) | true         |
+| **Type**                      | **Required** |
+| ----------------------------- | ------------ |
+| number &#x7c; string (number) | true         |
 
 ### cy2
 
 The y coordinate of the curve's control point at the end.
 
-| **Type**                  | **Required** |
-| ------------------------- | ------------ |
-| number \| string (number) | true         |
+| **Type**                      | **Required** |
+| ----------------------------- | ------------ |
+| number &#x7c; string (number) | true         |

docs/component_APIs/area_circle.md

@@ -37,22 +37,22 @@ render(<Example />);
 
 The x coordinate of the center of the cirle.
 
-| **Type**                  | **Required** |
-| ------------------------- | ------------ |
-| number \| string (number) | true         |
+| **Type**                      | **Required** |
+| ----------------------------- | ------------ |
+| number &#x7c; string (number) | true         |
 
 ### y
 
 The y coordinate of the center of the cirle.
 
-| **Type**                  | **Required** |
-| ------------------------- | ------------ |
-| number \| string (number) | true         |
+| **Type**                      | **Required** |
+| ----------------------------- | ------------ |
+| number &#x7c; string (number) | true         |
 
 ### r
 
 The circle's radius. Percentage values use the Area's width.
 
-| **Type**                  | **Required** |
-| ------------------------- | ------------ |
-| number \| string (number) | true         |
+| **Type**                      | **Required** |
+| ----------------------------- | ------------ |
+| number &#x7c; string (number) | true         |

docs/component_APIs/area_line.md

@@ -38,30 +38,30 @@ render(<Example />);
 
 The x coordinate of the line's start point.
 
-| **Type**                  | **Required** |
-| ------------------------- | ------------ |
-| number \| string (number) | true         |
+| **Type**                      | **Required** |
+| ----------------------------- | ------------ |
+| number &#x7c; string (number) | true         |
 
 ### y1
 
 The y coordinate of the line's start point.
 
-| **Type**                  | **Required** |
-| ------------------------- | ------------ |
-| number \| string (number) | true         |
+| **Type**                      | **Required** |
+| ----------------------------- | ------------ |
+| number &#x7c; string (number) | true         |
 
 ### x2
 
 The x coordinate of the line's end point.
 
-| **Type**                  | **Required** |
-| ------------------------- | ------------ |
-| number \| string (number) | true         |
+| **Type**                      | **Required** |
+| ----------------------------- | ------------ |
+| number &#x7c; string (number) | true         |
 
 ### y2
 
 The y coordinate of the line's end point.
 
-| **Type**                  | **Required** |
-| ------------------------- | ------------ |
-| number \| string (number) | true         |
+| **Type**                      | **Required** |
+| ----------------------------- | ------------ |
+| number &#x7c; string (number) | true         |

docs/component_APIs/area_props.md

@@ -31,9 +31,9 @@ The fill color for the component.
 
 The opacity of the fill (between 0 and 1). Gets multiplied with the fill colors alpha value.
 
-| **Type**                  | **Required** | **Default** |
-| ------------------------- | ------------ | ----------- |
-| number \| string (number) | false        | 1           |
+| **Type**                      | **Required** | **Default** |
+| ----------------------------- | ------------ | ----------- |
+| number | string (number) | false        | 1           |
 
 ## stroke
 
@@ -47,15 +47,15 @@ The stroke (line) color for the component.
 
 The opacity of the stroke (between 0 and 1). Gets multiplied with the stroke colors alpha value.
 
-| **Type**                  | **Required** | **Default** |
-| ------------------------- | ------------ | ----------- |
-| number \| string (number) | false        | 1           |
+| **Type**                      | **Required** | **Default** |
+| ----------------------------- | ------------ | ----------- |
+| number | string (number) | false        | 1           |
 
 ## strokeWidth
 
-| **Type**                  | **Required** | **Default** |
-| ------------------------- | ------------ | ----------- |
-| number \| string (number) | false        | 1           |
+| **Type**                      | **Required** | **Default** |
+| ----------------------------- | ------------ | ----------- |
+| number | string (number) | false        | 1           |
 
 ## strokeLinecap
 
@@ -73,9 +73,9 @@ The opacity of the stroke (between 0 and 1). Gets multiplied with the stroke col
 
 How far to extend the stroke at a sharp corner when using `strokeLinejoin='miter'`, see [here](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit) for a more detailed explanation.
 
-| **Type**                  | **Required** | **Default** |
-| ------------------------- | ------------ | ----------- |
-| number \| string (number) | false        | 10          |
+| **Type**                      | **Required** | **Default** |
+| ----------------------------- | ------------ | ----------- |
+| number | string (number) | false        | 10          |
 
 ## transform