Improve Styling

Author: lisandroct

assets/css/bootstrap/scss/_variables.scss

@@ -735,15 +735,17 @@ $table-cell-padding-x-sm:     .25rem !default;
 
 $table-cell-vertical-align:   top !default;
 
-$table-color:                 var(--#{$prefix}emphasis-color) !default;
-$table-bg:                    var(--#{$prefix}body-bg) !default;
+$table-color:                 $theme-text-color-primary !default;
+// $table-bg:                    lighten($theme-code-bg-color, 15%) !default;
+$table-bg:                    $theme-code-bg-color !default;
 $table-accent-bg:             transparent !default;
 
 $table-th-font-weight:        null !default;
 
 $table-striped-color:         $table-color !default;
-$table-striped-bg-factor:     .05 !default;
-$table-striped-bg:            rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
+$table-striped-bg-factor:     0 !default;
+// $table-striped-bg:            darken($theme-code-bg-color, 100%) !default;
+$table-striped-bg:            $theme-code-bg-color !default;
 
 $table-active-color:          $table-color !default;
 $table-active-bg-factor:      .1 !default;
@@ -755,7 +757,7 @@ $table-hover-bg:              rgba(var(--#{$prefix}emphasis-color-rgb), $table-h
 
 $table-border-factor:         .2 !default;
 $table-border-width:          var(--#{$prefix}border-width) !default;
-$table-border-color:          var(--#{$prefix}border-color) !default;
+$table-border-color:          darken($theme-code-bg-color, 15%) !default;
 
 $table-striped-order:         odd !default;
 $table-striped-columns-order: even !default;
@@ -1546,8 +1548,8 @@ $modal-scale-transform:             scale(1.02) !default;
 // Define alert colors, border radius, and padding.
 
 // scss-docs-start alert-variables
-$alert-padding-y:               $spacer !default;
-$alert-padding-x:               $spacer !default;
+$alert-padding-y:               $spacer * 0.5 !default;
+$alert-padding-x:               $spacer * 0.5 !default;
 $alert-margin-bottom:           1rem !default;
 $alert-border-radius:           var(--#{$prefix}border-radius) !default;
 $alert-link-font-weight:        $font-weight-bold !default;

assets/css/theme/_docs.scss

@@ -2,8 +2,6 @@
 	max-width: 600px;
 }
 
-
-
 .docs-overview {
 	.card {
 		border-color: $theme-divider;
@@ -332,57 +330,104 @@
 	background: $smoky-white;
 	margin-top: 1rem;
 	margin-bottom: 1rem;
-	
-	code {
-		background: #fff;
-	}
+
+	border-radius: 3px;
+	border-top-right-radius: 9px;
+	border-bottom-right-radius: 9px;
+
+	box-shadow: 5px 0px 15px rgba(0, 0, 0, 0.2);
 
 	.callout-title {
-		font-size: 1rem;
+		font-size: 1.15rem;
+
+		i {
+			margin-right: 4px;
+		}
+	}
+
+	p:last-of-type, ul:last-of-type, ol:last-of-type, dl:last-of-type {
+		margin-bottom: 0;
 	}
 
 	&.callout-block-info {
 		border-color: $theme-info-color;
-		background: lighten($theme-info-color, 35%);
+		background: rgba(lighten($theme-info-color, 35%), 0.95);
+		color: darken($theme-info-color, 5%);
 		.callout-title {
-			color: darken($theme-info-color, 15%);
+			color: darken($theme-info-color, 20%);
 		}
 		a {
 			color: darken($theme-info-color, 15%);
 		}
+		strong {
+			color: darken($theme-info-color, 10%);
+		}
+		code {
+			background-color: rgba(darken($theme-info-color, 25%), 0.3);
+			color: darken($theme-info-color, 25%);
+		}
 	}
 	&.callout-block-success {
 		border-color: $theme-success-color;
-		background: lighten($theme-success-color, 40%);
+		background: rgba(lighten($theme-success-color, 40%), 0.95);
+		color: darken($theme-success-color, 10%);
 		.callout-title {
-			color: darken($theme-success-color, 15%);
+			color: darken($theme-success-color, 25%);
 		}
 		a {
+			color: darken($theme-success-color, 20%);
+		}
+		strong {
 			color: darken($theme-success-color, 15%);
 		}
+		code {
+			background-color: rgba(darken($theme-success-color, 25%), 0.3);
+			color: darken($theme-success-color, 30%);
+		}
 	}
 	&.callout-block-warning {
 		border-color: $theme-warning-color;
-		background: lighten($theme-warning-color, 35%);
+		background: rgba(lighten($theme-warning-color, 37%), 0.95);
+		color: darken($theme-warning-color, 5%);
 		.callout-title {
-			color: darken($theme-warning-color, 15%);
+			color: darken($theme-warning-color, 20%);
 		}
 		a {
 			color: darken($theme-warning-color, 15%);
 		}
+		strong {
+			color: darken($theme-warning-color, 10%);
+		}
+		code {
+			background-color: rgba(darken($theme-warning-color, 25%), 0.3);
+			color: darken($theme-warning-color, 25%);
+		}
 	}
 	&.callout-block-danger {
 		border-color: $theme-danger-color;
-		background: lighten($theme-danger-color, 35%);
+		background: rgba(lighten($theme-danger-color, 36%), 0.95);
+		color: darken($theme-danger-color, 5%);
 		.callout-title {
-			color: darken($theme-danger-color, 15%);
+			color: darken($theme-danger-color, 20%);
 		}
 		a {
 			color: darken($theme-danger-color, 15%);
 		}
+		strong {
+			color: darken($theme-danger-color, 10%);
+		}
+		code {
+			background-color: rgba(darken($theme-danger-color, 25%), 0.3);
+			color: darken($theme-danger-color, 25%);
+		}
 	}
 }
 
+.alert {
+	font-size: 0.85rem;
+    font-style: italic;
+}
+
 .version-picker {
 	position: fixed;
 	top: 1rem;
@@ -415,6 +460,35 @@
 	}
 }
 
+figure {
+	figcaption {
+		font-style: italic;
+		font-size: 0.85rem;
+		color: rgba(darken($theme-bg, 10%), 0.9);
+		font-family: monospace;
+	}
+}
+
+.table {
+	margin-bottom: 0;
+
+	thead, tbody, tfoot, tr, td, th {
+		border: none;
+	}
+
+
+}
+.table-striped tbody tr:nth-of-type(odd) {
+	background-color: rgba(lighten($theme-code-bg-color, 10%), 0.1);
+}
+
+.table-responsive {
+	border-radius: 4px;
+	// border-width: 5px;
+	// border-color: darken($theme-code-bg-color, 10%);
+}
+
+
 
 /* printing  */
 @media print {

docs/rish/3.0.0/best-practices.md

@@ -438,7 +438,8 @@ public partial class NestedElementsExample : RishElement
 
 More complex Elements are defined in separate files.
 
-_File 1_
+<figure>
+    <figcaption>File 1</figcaption>
 {% highlight csharp %}
 public partial class NestedElementsExample : RishElement<NestedElementsExampleProps>
 {
@@ -455,8 +456,10 @@ public struct NestedElementsExampleProps {
     // ...
 }
 {% endhighlight %}
+</figure>
 
-_File 2_
+<figure>
+    <figcaption>File 2</figcaption>
 {% highlight csharp %}
 public partial class NestedElementsExample
 {
@@ -483,6 +486,7 @@ public partial class NestedElementsExample
     }
 }
 {% endhighlight %}
+</figure>
 
 ### Readability
 To maintain readability in declarative code, we enforce specific line-break rules.

docs/rish/3.0.0/installation.md

@@ -25,9 +25,9 @@ Rish comes with a Roslyn Source Generator called **Rishenerator**. While it is t
     <div class="content">
         <h4 class="callout-title"><i class="fa-solid fa-circle-info"></i>Why use Rishenerator?</h4>
         <ul>
-            <li><b>Drastically reduces development time</b> by automating boilerplate.</li>
-            <li><b>Eliminates errors</b> associated with manual implementation.</li>
-            <li><b>Optimizes performance</b> and memory efficiency automatically.</li>
+            <li><strong>Drastically reduces development time</strong> by automating boilerplate.</li>
+            <li><strong>Eliminates errors</strong> associated with manual implementation.</li>
+            <li><strong>Optimizes performance</strong> and memory efficiency automatically.</li>
         </ul>
     </div>
 </div>
@@ -41,15 +41,16 @@ Rish comes with a Roslyn Source Generator called **Rishenerator**. While it is t
   - Ensure the **Select platforms for plugin** list is empty (no platforms selected).
   - Add (if not present already) the `RoslynAnalyzer` label.
 
-_Note: The rest of this guide assumes Rishenerator is enabled._
+<div class="alert alert-warning" role="alert">
+    The rest of this guide assumes Rishenerator is enabled.
+</div>
 
 ## Setup
 You can run multiple Rish apps simultaneously (e.g., one for Screen Space UI and another for World Space HUDs). Each app manages its own UI Toolkit tree.
 
 To set up a Rish App in your scene:
 1. Create an empty **GameObject** (e.g., named "UI_Root").
-2. Add the `RishRoot` component to it.
-  - _Note: This will automatically add a UIDocument component if one is missing._
+2. Add the `RishRoot` component to it. This will automatically add a `UIDocument` component if one is missing.
 3. Assign your **Panel Settings** to the `UIDocument`.
 4. Create a class that implements `IApp` and assign it to the `RishRoot`.
 

docs/rish/3.0.0/memory-management.md

@@ -20,7 +20,12 @@ Rish automatically pools all reference types it handles.
 - **Allocation:** When a new instance is needed, Rish retrieves one from a pre-allocated pool.
 - **Deallocation:** When an instance is no longer needed (e.g., an element is unmounted), Rish automatically returns it to the pool.
 
-_Crucial Rule: You should never call a constructor for a UI Element (or any type managed by Rish) directly. Always use the static `Create` methods. This ensures the element is correctly retrieved from the pool and tracked by Rish._
+<div class="callout-block callout-block-danger">
+    <div class="content">
+        <h4 class="callout-title">Crucial</h4>
+        <p>You should <strong>never</strong> call a constructor for a UI Element (or any reference type managed by Rish) directly. Always use the static <code>Create</code> methods. This ensures the element is correctly retrieved from the pool and tracked by Rish.</p>
+    </div>
+</div>
 
 ## The Pointer System
 To efficiently handle these pooled resources without exposing the heavy reference types to the user, Rish uses a **Pointer System**.
@@ -122,4 +127,6 @@ To create a custom pooled type:
 
 Once implemented, Rish will automatically pool instances of your class and allow you to use them safely within Managed Contexts, just like native Rish types.
 
-_A more in depth guide coming soon._
+<div class="alert alert-info" role="alert">
+    A more in depth guide coming soon.
+</div>

docs/rish/3.0.0/quick-start.md

@@ -2,9 +2,10 @@
 layout: docs
 title: Quick Start
 sections:
-  - Creating and nesting elements
-  - Elements Inputs
-  - It's just C#
+  - Why Rish?
+  - Elements Composition
+  - Inputs and Data Flow
+  - It's Just C#
   - Roots
 order: 0
 icon: handshake
@@ -14,14 +15,14 @@ Welcome to **Rish**! Rish is a declarative UI library for Unity that uses **UI T
 
 If you are familiar with React or other declarative UI frameworks, you will feel right at home. Rish (loosely) follows the React paradigm: you tell the computer what to do, not how to do it.
 
-### Why Rish?
+## Why Rish?
 **Declarative:** You define the desired state of the UI, and Rish handles the updates.
 
 **Best of Both Worlds:** It combines the benefits of Immediate Mode (code-driven, logical) with Retained Mode (stateful, efficient).
 
 **Deterministic:** Implemented properly, your UI becomes a pure function of your game state. Always in sync and (hopefully 🤞) bug-free.
 
-## Creating and nesting elements
+## Elements Composition
 Rish apps are built using Elements (a piece of the UI that has it's own logic and appearence). (Note: While React calls them "Components," we stick to "Elements" to align with UI Toolkit's naming conventions).
 
 There are two distinct types of elements in Rish:

docs/rish/3.0.0/rishelements.md

@@ -20,13 +20,18 @@ All UI elements are added to a **Virtual Tree** managed by Rish.
 To create a new RishElement, you inherit from `RishElement` and implement the `Render` method. A `RishElement` always has exactly one child (the element returned by `Render`). If an element shouldn't have a child, you can return `Element.Null`.
 
 ### Types
-
 There are three main base classes for `RishElement`, depending on your data needs:
+
 - `RishElement`: For elements with no Props or State.
 - `RishElement<Props>`: For elements that receive data from parents.
 - `RishElement<Props, State>`: For elements that receive data and manage internal state.
 
-_Note: Internally, every RishElement has a Props type. The base RishElement simply inherits from RishElement<NoProps>._
+<div class="callout-block callout-block-info">
+    <div class="content">
+        <h4 class="callout-title">Node</h4>
+        <p>Internally, every RishElement has a Props type. The base <code>RishElement</code> simply inherits from <code>RishElement&lt;NoProps&gt;</code>.</p>
+    </div>
+</div>
 
 ## Inputs: Props and State
 Our goal is a **Deterministic UI**. We treat UI elements as **Pure Functions**:
@@ -148,7 +153,12 @@ private partial class FooElement : RishElement, IManualState
 }
 {% endhighlight %}
 
-_Warning: `IManualState.Restart` will be called right before the element gets reused from the Pool. Do not use `Restart` to unsubscribe from events or cancel actions. Use `ComponentWillUnmount` for that._
+<div class="callout-block callout-block-warning">
+    <div class="content">
+        <h4 class="callout-title">Warning</h4>
+        <p><code>IManualState.Restart</code> will be called right before the element gets reused from the Pool. Do not use <code>Restart</code> to unsubscribe from events or cancel actions. Use <code>ComponentWillUnmount</code> for that.</p>
+    </div>
+</div>
 
 ### Delayed Unmounting
 Sometimes you need to delay removal, for example, to play an Outro Animation.
@@ -259,7 +269,12 @@ Notifies you every time props are set, even if the values are identical (and the
 ## UIToolkit Events
 RishElements can listen to UI Toolkit events (like clicks or hovers) just like VisualElements.
 
-_**Important:** Since RishElements don't exist in the Visual Tree, Rish attaches these callbacks to the first VisualElement descendant._
+<div class="callout-block callout-block-info">
+    <div class="content">
+        <h4 class="callout-title">Important</h4>
+        <p>Since RishElements don't exist in the Visual Tree, Rish attaches these callbacks to the first VisualElement descendant.</p>
+    </div>
+</div>
 
 {% highlight csharp %}
 public partial class FooElement : RishElement<NoProps, FooState>
@@ -281,7 +296,6 @@ public struct FooState {
 }
 {% endhighlight %}
 
-
 ### REVIEW
 You can also create a `ToolkitManipulator` (similar to UI Toolkit's `Manipulator`) and add it to your RishElement with `AddManipulator` and remove it with `RemoveManipulator`.