Much cleaner theme application impl

Author: davesmith00000

sandbox-ui/src/main/scala/example/Model.scala

@@ -37,19 +37,21 @@ object Model:
       TopNav.initial,
       Input(UIKey("name-input"))
         .withPlaceholder("Type here...")
-        .withTextColor(RGBA.fromHex("#1f2937"))
-        .withBackgroundColor(RGBA.fromHex("#f9fafb"))
-        .solidBorder(BorderWidth.Thin, RGBA.fromHex("#d1d5db"))
-        .rounded
-        .withPadding(Spacing.Small)
+        .withThemeOverride(
+          _.withTextColor(RGBA.fromHex("#1f2937"))
+            .withBackgroundColor(RGBA.fromHex("#f9fafb"))
+            .solidBorder(BorderWidth.Thin, RGBA.fromHex("#d1d5db"))
+            .rounded
+            .withPadding(Spacing.Small)
+        )
     )
 
   def tmpView(m: Model)(using Theme): HtmlFragment =
     HtmlFragment(
       Row(
         Column(
           TextBlock("Welcome to Tyrian UI!").toHeading1
-            .withColor(RGBA.fromHex("#2563eb")),
+            .withThemeOverride(_.withTextColor(RGBA.fromHex("#2563eb"))),
           Row(
             Column(
               TextBlock("Your name:"),
@@ -58,12 +60,12 @@ object Model:
             )
           ).withSpacing(Spacing.Small),
           Row(
-            TextBlock("Hello, Tyrian!").withColor(RGBA.Blue),
-            TextBlock("More text").withColor(RGBA.Red.mix(RGBA.Blue))
+            TextBlock("Hello, Tyrian!").withThemeOverride(_.withTextColor(RGBA.Blue)),
+            TextBlock("More text").withThemeOverride(_.withTextColor(RGBA.Red.mix(RGBA.Blue)))
           )
             .withSpacing(Spacing.Medium),
           TextBlock("This is just some text")
-            .withColor(RGBA.fromHex("#6b7280")),
+            .withThemeOverride(_.withTextColor(RGBA.fromHex("#6b7280"))),
           HtmlElement(
             tyrian.Html.div(
               tyrian.Html.style := "border: 2px dashed #ccc; padding: 1rem; border-radius: 4px; margin: 1rem 0;"
@@ -80,22 +82,25 @@ object Model:
             TextBlock("This is some more text.")
           ).middle.center
             .withPadding(Spacing.Large)
-            .rounded
-            .solidBorder(BorderWidth.Medium, RGBA.fromHex("#10b981"))
-            .shadowMedium(RGBA.fromHex("#00000040"))
-            .withBackgroundColor(RGBA.fromHex("#ecfdf5"))
-            .withOpacity(Opacity.High),
+            .withThemeOverride(
+              _.rounded
+                .solidBorder(BorderWidth.Medium, RGBA.fromHex("#10b981"))
+                .shadowMedium(RGBA.fromHex("#00000040"))
+                .withBackgroundColor(RGBA.fromHex("#ecfdf5"))
+                .withOpacity(Opacity.High)
+            ),
           Image(
             "https://raw.githubusercontent.com/PurpleKingdomGames/roguelike-starterkit/417f4e372b4792972ef62aea0c917088a9fc82fd/roguelike.gif",
             "Roguelike"
-          )
-            .withSize(Extent.px(300), Extent.px(100))
+          ).withSize(Extent.px(300), Extent.px(100))
             .scaleDown
-            .rounded
-            .solidBorder(BorderWidth.Medium, RGBA.fromHex("#2563eb"))
-            .shadowLarge(RGBA.fromHex("#00000080"))
-            .withBackgroundColor(RGBA.fromHex("#fbbf24"))
-            .withOpacity(Opacity.Medium)
+            .withThemeOverride(
+              _.rounded
+                .solidBorder(BorderWidth.Medium, RGBA.fromHex("#2563eb"))
+                .shadowLarge(RGBA.fromHex("#00000080"))
+                .withBackgroundColor(RGBA.fromHex("#fbbf24"))
+                .withOpacity(Opacity.Medium)
+            )
         )
       )
         .withSpacing(Spacing.Large)

tyrian-next/src/main/scala/tyrian/next/HtmlFragment.scala

@@ -111,14 +111,14 @@ object HtmlFragment:
   /** Creates an HtmlFragment containing only top-level ui elements, with no marker inserts. The elements will be
     * rendered directly as part of the fragment's markup when resolved by an HtmlRoot.
     */
-  def apply(markup: Batch[UIElement[?]])(using Theme): HtmlFragment =
-    HtmlFragment(markup.map(_.view), emptyInserts)
+  def apply(markup: Batch[UIElement[?, ?]])(using Theme): HtmlFragment =
+    HtmlFragment(markup.map(_.toElem), emptyInserts)
 
   /** Creates an HtmlFragment from a variable number of ui elements, converting them into a Batch internally. This is
     * the most common way to create fragments when you have individual elements to include.
     */
-  def apply(markup: UIElement[?]*)(using Theme): HtmlFragment =
-    HtmlFragment(Batch.fromSeq(markup).map(_.view), emptyInserts)
+  def apply(markup: UIElement[?, ?]*)(using Theme): HtmlFragment =
+    HtmlFragment(Batch.fromSeq(markup).map(_.toElem), emptyInserts)
 
   /** Creates an HtmlFragment that contains only insert data for a specific marker, with no top-level markup. When
     * resolved, these elements will replace any Marker with the matching MarkerId in the final DOM tree.
@@ -136,12 +136,12 @@ object HtmlFragment:
     * markup. When resolved, these elements will replace any Marker (or Placeholder if using Tyrian-UI) with the
     * matching MarkerId in the final DOM tree.
     */
-  def insert(at: MarkerId, elements: Batch[UIElement[?]])(using Theme): HtmlFragment =
-    HtmlFragment(Batch.empty, Map(at -> elements.map(_.view)))
+  def insert(at: MarkerId, elements: Batch[UIElement[?, ?]])(using Theme): HtmlFragment =
+    HtmlFragment(Batch.empty, Map(at -> elements.map(_.toElem)))
 
   /** Creates an HtmlFragment that contains only insert data for a specific marker / placeholder, with no top-level
     * markup. When resolved, these elements will replace any Marker (or Placeholder if using Tyrian-UI) with the
     * matching MarkerId in the final DOM tree.
     */
-  def insert(at: MarkerId, elements: UIElement[?]*)(using Theme): HtmlFragment =
-    insert(at, Batch.fromSeq(elements).map(_.view))
+  def insert(at: MarkerId, elements: UIElement[?, ?]*)(using Theme): HtmlFragment =
+    insert(at, Batch.fromSeq(elements).map(_.toElem))

tyrian-next/src/main/scala/tyrian/ui/UIElement.scala

@@ -2,28 +2,53 @@ package tyrian.ui
 
 import tyrian.next.GlobalMsg
 import tyrian.next.Outcome
+import tyrian.ui.utils.Lens
 
-trait UIElement[T]:
+trait UIElement[Component, ComponentTheme]:
 
   def classNames: Set[String]
-  def withClassNames(classes: Set[String]): T
-  def withClassNames(classes: String*): T    = withClassNames(classes.toSet)
-  def addClassNames(classes: Set[String]): T = withClassNames(classNames ++ classes)
-  def addClassNames(classes: String*): T     = addClassNames(classes.toSet)
+  def withClassNames(classes: Set[String]): Component
+  def withClassNames(classes: String*): Component    = withClassNames(classes.toSet)
+  def addClassNames(classes: Set[String]): Component = withClassNames(classNames ++ classes)
+  def addClassNames(classes: String*): Component     = addClassNames(classes.toSet)
+
+  def themeOverride: Option[ComponentTheme => ComponentTheme]
+  def themeLens: Lens[Theme, ComponentTheme]
+  def withThemeOverride(f: ComponentTheme => ComponentTheme): Component
+
+  /** *Should not be called directly.* User provided implementation of a function to render the UIElement into a Tyrian
+    * Elem[GlobalMsg] with the given theme, however, the correct way to render a UIElement is to call `toElem`, which
+    * applies the theme overrides.
+    */
+  def view: Theme ?=> tyrian.Elem[GlobalMsg]
 
-  def overrideLocalTheme: Option[Theme => Theme]
-  def withThemeOverride(f: Theme => Theme): T
+  /** Renders the current element to into a Tyrian Elem[GlobalMsg] with the given theme and theme overrides.
+    */
+  def toElem: Theme ?=> tyrian.Elem[GlobalMsg] =
+    val overriddenTheme =
+      applyThemeOverrides(summon[Theme])
 
-  def view: Theme ?=> tyrian.Elem[GlobalMsg]
+    view(using overriddenTheme)
+
+  /** An implementation detail, left open for testing purposes. Allows you to see how a given Theme will be modified by
+    * the UIElement
+    */
+  def applyThemeOverrides(theme: Theme): Theme =
+    themeOverride match
+      case Some(g) =>
+        themeLens.set(theme, g(themeLens.get(theme)))
+
+      case None =>
+        theme
 
 object UIElement:
 
-  trait Stateful[T] extends UIElement[T]:
+  trait Stateful[Component, ComponentTheme] extends UIElement[Component, ComponentTheme]:
 
     def key: UIKey
-    def withKey(value: UIKey): T
+    def withKey(value: UIKey): Component
 
-    def update: GlobalMsg => Outcome[T]
+    def update: GlobalMsg => Outcome[Component]
 
 /*
 

tyrian-next/src/main/scala/tyrian/ui/elements/stateful/input/Input.scala

@@ -8,14 +8,8 @@ import tyrian.next.Outcome
 import tyrian.ui
 import tyrian.ui.UIElement
 import tyrian.ui.UIKey
-import tyrian.ui.datatypes.Border
-import tyrian.ui.datatypes.BorderRadius
-import tyrian.ui.datatypes.BorderWidth
-import tyrian.ui.datatypes.FontSize
-import tyrian.ui.datatypes.FontWeight
-import tyrian.ui.datatypes.RGBA
-import tyrian.ui.datatypes.Spacing
 import tyrian.ui.theme.Theme
+import tyrian.ui.utils.Lens
 
 final case class Input(
     key: UIKey,
@@ -24,8 +18,8 @@ final case class Input(
     isReadOnly: Boolean,
     value: String,
     classNames: Set[String],
-    overrideLocalTheme: Option[Theme => Theme]
-) extends UIElement.Stateful[Input]:
+    themeOverride: Option[InputTheme => InputTheme]
+) extends UIElement.Stateful[Input, InputTheme]:
 
   def withPlaceholder(placeholder: String): Input =
     this.copy(placeholder = placeholder)
@@ -53,69 +47,14 @@ final case class Input(
   def withClassNames(classes: Set[String]): Input =
     this.copy(classNames = classes)
 
-  def withThemeOverride(f: Theme => Theme): Input =
-    val h =
-      overrideLocalTheme match
-        case Some(g) => f andThen g
-        case None    => f
-
-    this.copy(overrideLocalTheme = Some(h))
-
-  def overrideInputTheme(f: InputTheme => InputTheme): Input =
-    val g: Theme => Theme = theme => theme.copy(input = f(theme.input))
-    withThemeOverride(g)
-
-  def withFontSize(size: FontSize): Input =
-    overrideInputTheme(_.withFontSize(size))
-
-  def withFontWeight(weight: FontWeight): Input =
-    overrideInputTheme(_.withFontWeight(weight))
-
-  def withTextColor(color: RGBA): Input =
-    overrideInputTheme(_.withTextColor(color))
-
-  def withBackgroundColor(color: RGBA): Input =
-    overrideInputTheme(_.withBackgroundColor(color))
-
-  def withBorder(border: Border): Input =
-    overrideInputTheme(_.withBorder(border))
-  def noBorder: Input =
-    overrideInputTheme(_.noBorder)
-  def modifyBorder(f: Border => Border): Input =
-    overrideInputTheme(_.modifyBorder(f))
-  def solidBorder(width: BorderWidth, color: RGBA): Input =
-    overrideInputTheme(_.solidBorder(width, color))
-  def dashedBorder(width: BorderWidth, color: RGBA): Input =
-    overrideInputTheme(_.dashedBorder(width, color))
-
-  def withBorderColor(color: RGBA): Input =
-    overrideInputTheme(_.modifyBorder(_.withColor(color)))
-
-  def withBorderRadius(radius: BorderRadius): Input =
-    overrideInputTheme(_.withBorderRadius(radius))
-
-  def square: Input =
-    overrideInputTheme(_.square)
-  def rounded: Input =
-    overrideInputTheme(_.rounded)
-  def roundedSmall: Input =
-    overrideInputTheme(_.roundedSmall)
-  def roundedLarge: Input =
-    overrideInputTheme(_.roundedLarge)
-  def circular: Input =
-    overrideInputTheme(_.circular)
-
-  def withPadding(padding: Spacing): Input =
-    overrideInputTheme(_.withPadding(padding))
-
-  def withDisabledBackgroundColor(value: RGBA): Input =
-    overrideInputTheme(_.withDisabledBackgroundColor(value))
-
-  def withDisabledTextColor(value: RGBA): Input =
-    overrideInputTheme(_.withDisabledTextColor(value))
+  def themeLens: Lens[Theme, InputTheme] =
+    Lens(
+      _.input,
+      (t, i) => t.copy(input = i)
+    )
 
-  def withDisabledBorderColor(value: RGBA): Input =
-    overrideInputTheme(_.withDisabledBorderColor(value))
+  def withThemeOverride(f: InputTheme => InputTheme): Input =
+    this.copy(themeOverride = Some(f))
 
   def update: GlobalMsg => Outcome[Input] =
     case TextInputMsg.Changed(_key, v) if _key == key =>
@@ -128,11 +67,8 @@ final case class Input(
       Outcome(this)
 
   def view: Theme ?=> Elem[GlobalMsg] =
-    val theme = summon[Theme]
-
-    val inputTheme = overrideLocalTheme match
-      case Some(f) => f(theme).input
-      case None    => theme.input
+    val theme      = summon[Theme]
+    val inputTheme = theme.input
 
     val disabledAttr =
       if isDisabled then attribute("disabled", "true")

tyrian-next/src/main/scala/tyrian/ui/elements/stateful/input/InputTheme.scala

@@ -53,21 +53,24 @@ final case class InputTheme(
   def dashedBorder(width: BorderWidth, color: RGBA): InputTheme =
     modifyBorder(_.withStyle(BorderStyle.Dashed).withWidth(width).withColor(color))
 
-  def withBorderRadius(radius: BorderRadius): InputTheme =
-    withBorder(
-      border match
-        case Some(b) => b.withRadius(radius)
-        case None    => Border.default.withRadius(radius)
-    )
   def square: InputTheme       = withBorderRadius(BorderRadius.None)
   def rounded: InputTheme      = withBorderRadius(BorderRadius.Medium)
   def roundedSmall: InputTheme = withBorderRadius(BorderRadius.Small)
   def roundedLarge: InputTheme = withBorderRadius(BorderRadius.Large)
   def circular: InputTheme     = withBorderRadius(BorderRadius.Full)
 
+  def withBorderRadius(radius: BorderRadius): InputTheme =
+    modifyBorder(_.withRadius(radius))
+
   def withBorderColor(value: RGBA): InputTheme =
     modifyBorder(_.withColor(value))
 
+  def withBorderWidth(value: BorderWidth): InputTheme =
+    modifyBorder(_.withWidth(value))
+
+  def withBorderStyle(value: BorderStyle): InputTheme =
+    modifyBorder(_.withStyle(value))
+
   def withPadding(value: Spacing): InputTheme =
     this.copy(padding = value)
 

tyrian-next/src/main/scala/tyrian/ui/elements/stateless/html/HtmlElement.scala

@@ -3,21 +3,25 @@ package tyrian.ui.elements.stateless.html
 import tyrian.next.GlobalMsg
 import tyrian.ui.UIElement
 import tyrian.ui.theme.Theme
+import tyrian.ui.utils.Lens
 
 final case class HtmlElement(
     html: tyrian.Elem[GlobalMsg],
     classNames: Set[String],
-    overrideLocalTheme: Option[Theme => Theme]
-) extends UIElement[HtmlElement]:
+    themeOverride: Option[Unit => Unit]
+) extends UIElement[HtmlElement, Unit]:
 
   def withHtml(html: tyrian.Elem[GlobalMsg]): HtmlElement =
     this.copy(html = html)
 
   def withClassNames(classes: Set[String]): HtmlElement =
     this.copy(classNames = classes)
 
-  def withThemeOverride(f: Theme => Theme): HtmlElement =
-    this.copy(overrideLocalTheme = Some(f))
+  def themeLens: Lens[Theme, Unit] =
+    Lens.unit
+
+  def withThemeOverride(f: Unit => Unit): HtmlElement =
+    this
 
   def view: Theme ?=> tyrian.Elem[GlobalMsg] =
     HtmlElement.toHtml(this)
@@ -31,21 +35,21 @@ object HtmlElement:
     HtmlElement(
       html = html,
       classNames = Set.empty,
-      overrideLocalTheme = None
+      themeOverride = None
     )
 
   def raw(htmlString: String): HtmlElement =
     HtmlElement(
       html = div().innerHtml(htmlString),
       classNames = Set.empty,
-      overrideLocalTheme = None
+      themeOverride = None
     )
 
   def text(content: String): HtmlElement =
     HtmlElement(
       html = span(content),
       classNames = Set.empty,
-      overrideLocalTheme = None
+      themeOverride = None
     )
 
   def toHtml(element: HtmlElement): tyrian.Elem[GlobalMsg] =