More theme management massaging

Author: davesmith00000

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

@@ -37,7 +37,7 @@ object Model:
       TopNav.initial,
       Input(UIKey("name-input"))
         .withPlaceholder("Type here...")
-        .withThemeOverride(
+        .overrideTheme(
           _.withTextColor(RGBA.fromHex("#1f2937"))
             .withBackgroundColor(RGBA.fromHex("#f9fafb"))
             .solidBorder(BorderWidth.Thin, RGBA.fromHex("#d1d5db"))
@@ -51,7 +51,7 @@ object Model:
       Row(
         Column(
           TextBlock("Welcome to Tyrian UI!").toHeading1
-            .withThemeOverride(_.withTextColor(RGBA.fromHex("#2563eb"))),
+            .overrideTheme(_.withTextColor(RGBA.fromHex("#2563eb"))),
           Row(
             Column(
               TextBlock("Your name:"),
@@ -60,12 +60,12 @@ object Model:
             )
           ).withSpacing(Spacing.Small),
           Row(
-            TextBlock("Hello, Tyrian!").withThemeOverride(_.withTextColor(RGBA.Blue)),
-            TextBlock("More text").withThemeOverride(_.withTextColor(RGBA.Red.mix(RGBA.Blue)))
+            TextBlock("Hello, Tyrian!").overrideTheme(_.withTextColor(RGBA.Blue)),
+            TextBlock("More text").overrideTheme(_.withTextColor(RGBA.Red.mix(RGBA.Blue)))
           )
             .withSpacing(Spacing.Medium),
           TextBlock("This is just some text")
-            .withThemeOverride(_.withTextColor(RGBA.fromHex("#6b7280"))),
+            .overrideTheme(_.withTextColor(RGBA.fromHex("#6b7280"))),
           HtmlElement(
             tyrian.Html.div(
               tyrian.Html.style := "border: 2px dashed #ccc; padding: 1rem; border-radius: 4px; margin: 1rem 0;"
@@ -82,7 +82,7 @@ object Model:
             TextBlock("This is some more text.")
           ).middle.center
             .withPadding(Spacing.Large)
-            .withThemeOverride(
+            .overrideTheme(
               _.rounded
                 .solidBorder(BorderWidth.Medium, RGBA.fromHex("#10b981"))
                 .shadowMedium(RGBA.fromHex("#00000040"))
@@ -94,7 +94,7 @@ object Model:
             "Roguelike"
           ).withSize(Extent.px(300), Extent.px(100))
             .scaleDown
-            .withThemeOverride(
+            .overrideTheme(
               _.rounded
                 .solidBorder(BorderWidth.Medium, RGBA.fromHex("#2563eb"))
                 .shadowLarge(RGBA.fromHex("#00000080"))

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

@@ -2,6 +2,7 @@ package tyrian.ui
 
 import tyrian.next.GlobalMsg
 import tyrian.next.Outcome
+import tyrian.ui.theme.ThemeOverride
 import tyrian.ui.utils.Lens
 
 trait UIElement[Component, ComponentTheme]:
@@ -12,13 +13,19 @@ trait UIElement[Component, ComponentTheme]:
   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.Styles, ComponentTheme]
-  def withThemeOverride(f: ComponentTheme => ComponentTheme): Component
+  def themeOverride: ThemeOverride[ComponentTheme]
+  def themeLens: Lens[Theme.Default, ComponentTheme]
+  def withThemeOverride(value: ThemeOverride[ComponentTheme]): Component
+  def noTheme: Component =
+    withThemeOverride(ThemeOverride.NoTheme)
+  def useDefaultTheme: Component =
+    withThemeOverride(ThemeOverride.NoOverride)
+  def overrideTheme(modify: ComponentTheme => ComponentTheme): Component =
+    withThemeOverride(ThemeOverride.Override(modify))
 
   /** *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.
+    * applies any theme overrides.
     */
   def view: Theme ?=> tyrian.Elem[GlobalMsg]
 
@@ -27,25 +34,25 @@ trait UIElement[Component, ComponentTheme]:
   def toElem: Theme ?=> tyrian.Elem[GlobalMsg] =
     val overriddenTheme =
       summon[Theme] match
-        case t @ Theme.NoStyles =>
+        case t @ Theme.None =>
           t
 
-        case t: Theme.Styles =>
+        case t: Theme.Default =>
           applyThemeOverrides(t)
 
     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.Styles): Theme.Styles =
+  def applyThemeOverrides(theme: Theme.Default): Theme =
     themeOverride match
-      case Some(g) =>
-        themeLens.set(theme, g(themeLens.get(theme)))
+      case ThemeOverride.RemoveTheme() =>
+        Theme.None
 
-      case None =>
+      case ThemeOverride.DoNotOverride() =>
         theme
 
+      case ThemeOverride.Override[ComponentTheme](modify) =>
+        themeLens.set(theme, modify(themeLens.get(theme)))
+
 object UIElement:
 
   trait Stateful[Component, ComponentTheme] extends UIElement[Component, ComponentTheme]:
@@ -57,10 +64,19 @@ object UIElement:
 
 /*
 
+TODOs
+
 Theme
 
   - NoStyles
 
+Theme / Style Performance
+
+  - Font styles inherit, and they're very chunky. So what we could do is track
+  what's been set so far down any given rendering branch, and only set the style
+  tag for the changes. Might mean setting font details on Containers?
+
+  - The themes are a bit mixed at the moment. Review which fields should and shouldn't be optional to avoid needlessly writing out default styles. Also some styles might be set, but if they're the default, don't render.
 ---
 
 Stateless Components

tyrian-next/src/main/scala/tyrian/ui/datatypes/FontFamily.scala

@@ -0,0 +1,39 @@
+package tyrian.ui.datatypes
+
+enum FontFamily derives CanEqual:
+  case Stack(stack: FontStack)
+  case CSS(value: String)
+
+  def toCSSValue: String =
+    this match
+      case Stack(fonts) => fonts.toCSSValue
+      case CSS(value)   => value
+
+object FontFamily:
+
+  def fromCSS(css: String): FontFamily =
+    FontFamily.CSS(css)
+
+  def apply(stack: FontStack): FontFamily =
+    FontFamily.Stack(stack)
+
+  def apply(primary: FontName, fallbacks: FontName*): FontFamily =
+    FontFamily.Stack(FontStack(primary, fallbacks.toList))
+
+  // Pre-computed sans-serif font family stack
+  val sansSerif: FontFamily =
+    FontFamily.CSS(
+      FontFamily.Stack(FontStack.sansSerif).toCSSValue
+    )
+
+  // Pre-computed serif font family stack
+  val serif: FontFamily =
+    FontFamily.CSS(
+      FontFamily.Stack(FontStack.serif).toCSSValue
+    )
+
+  // Pre-computed monospace font family stack
+  val monospace: FontFamily =
+    FontFamily.CSS(
+      FontFamily.Stack(FontStack.monospace).toCSSValue
+    )

tyrian-next/src/main/scala/tyrian/ui/datatypes/FontName.scala

@@ -0,0 +1,57 @@
+package tyrian.ui.datatypes
+
+final case class FontName private (name: String, safeName: String):
+  def toCSSValue: String =
+    safeName
+
+object FontName:
+
+  def apply(name: String): FontName =
+    FontName(name, makeSafe(name))
+
+  private def makeSafe(s: String): String =
+    val hasNonStandardChars = """^[a-zA-Z0-9\-]+$""".r
+    if hasNonStandardChars.findFirstIn(s).isEmpty then s"'${s.replace("'", "\\'")}'"
+    else s
+
+  // Sans-serif
+  val systemUi: FontName        = FontName("system-ui")
+  val uiSansSerif: FontName     = FontName("ui-sans-serif")
+  val appleSystem: FontName     = FontName("-apple-system") // macOS / iOS
+  val segoeUiVariable: FontName = FontName("Segoe UI Variable")
+  val segoeUi: FontName         = FontName("Segoe UI")      // Windows
+  val roboto: FontName          = FontName("Roboto")        // Android / ChromeOS
+  val ubuntu: FontName          = FontName("Ubuntu")
+  val cantarell: FontName       = FontName("Cantarell")
+  val notoSans: FontName        = FontName("Noto Sans")
+  val helveticaNeue: FontName   = FontName("Helvetica Neue")
+  val helvetica: FontName       = FontName("Helvetica")     // Older macOS
+  val liberationSans: FontName  = FontName("Liberation Sans")
+  val arial: FontName           = FontName("Arial")
+  val appleColorEmoji: FontName = FontName("Apple Color Emoji")
+  val segoeUiEmoji: FontName    = FontName("Segoe UI Emoji")
+  val notoColorEmoji: FontName  = FontName("Noto Color Emoji")
+  val sansSerif: FontName       = FontName("sans-serif")
+
+  // Serif
+  val uiSerif: FontName         = FontName("ui-serif")
+  val georgia: FontName         = FontName("Georgia")
+  val cambria: FontName         = FontName("Cambria")
+  val timesNewRoman: FontName   = FontName("Times New Roman")
+  val times: FontName           = FontName("Times")
+  val notoSerif: FontName       = FontName("Noto Serif")
+  val liberationSerif: FontName = FontName("Liberation Serif")
+  val serif: FontName           = FontName("serif")
+
+  // Monospace
+  val uiMonospace: FontName    = FontName("ui-monospace")
+  val sfMonoRegular: FontName  = FontName("SFMono-Regular") /* macOS */
+  val menlo: FontName          = FontName("Menlo")
+  val monaco: FontName         = FontName("Monaco")
+  val consolas: FontName       = FontName("Consolas")
+  val cascadiaMono: FontName   = FontName("Cascadia Mono")
+  val liberationMono: FontName = FontName("Liberation Mono")
+  val dejavuSansMono: FontName = FontName("DejaVu Sans Mono")
+  val notoMono: FontName       = FontName("Noto Mono")
+  val courierNew: FontName     = FontName("Courier New")
+  val monospace: FontName      = FontName("monospace")

tyrian-next/src/main/scala/tyrian/ui/datatypes/FontStack.scala

@@ -0,0 +1,100 @@
+package tyrian.ui.datatypes
+
+final case class FontStack(primary: FontName, fallbacks: List[FontName]):
+  def toList: List[FontName] =
+    primary :: fallbacks
+
+  def toCSSValue: String =
+    (primary :: fallbacks).map(_.toCSSValue).mkString(", ")
+
+object FontStack:
+  def apply(primary: FontName): FontStack =
+    FontStack(primary, Nil)
+
+  def apply(primary: FontName, fallbacks: FontName*): FontStack =
+    FontStack(primary, fallbacks.toList)
+
+  val sansSerif: FontStack =
+    FontStack(
+      FontName.systemUi,
+      FontName.uiSansSerif,
+      FontName.appleSystem,
+      FontName.segoeUiVariable,
+      FontName.segoeUi,
+      FontName.roboto,
+      FontName.ubuntu,
+      FontName.cantarell,
+      FontName.notoSans,
+      FontName.helveticaNeue,
+      FontName.arial,
+      FontName.appleColorEmoji,
+      FontName.segoeUiEmoji,
+      FontName.notoColorEmoji,
+      FontName.sansSerif
+    )
+
+  val serif: FontStack =
+    FontStack(
+      FontName.uiSerif,
+      FontName.georgia,
+      FontName.cambria,
+      FontName.timesNewRoman,
+      FontName.times,
+      FontName.notoSerif,
+      FontName.liberationSerif,
+      FontName.serif
+    )
+
+  val monospace: FontStack =
+    FontStack(
+      FontName.uiMonospace,
+      FontName.sfMonoRegular,
+      FontName.menlo,
+      FontName.monaco,
+      FontName.consolas,
+      FontName.cascadiaMono,
+      FontName.liberationMono,
+      FontName.dejavuSansMono,
+      FontName.notoMono,
+      FontName.courierNew,
+      FontName.monospace
+    )
+
+/* Sans-serif
+font-family:
+  system-ui,
+  -apple-system, /* macOS / iOS */
+  "Segoe UI",    /* Windows */
+  Roboto,        /* Android / ChromeOS */
+  Ubuntu,
+  "Noto Sans",
+  "Helvetica Neue",
+  Arial,
+  "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
+  sans-serif;
+ */
+
+/*Serif
+font-family:
+  ui-serif,
+  Georgia,
+  Cambria,
+  "Times New Roman",
+  Times,
+  "Noto Serif",
+  serif;
+ */
+
+/*Monospace
+font-family:
+  ui-monospace,
+  SFMono-Regular, /* macOS */
+  Menlo,
+  Monaco,
+  Consolas,
+  "Liberation Mono",
+  "DejaVu Sans Mono",
+  "Noto Mono",
+  "Courier New",
+  monospace;
+ */

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

@@ -10,6 +10,7 @@ import tyrian.ui
 import tyrian.ui.UIElement
 import tyrian.ui.UIKey
 import tyrian.ui.theme.Theme
+import tyrian.ui.theme.ThemeOverride
 import tyrian.ui.utils.Lens
 
 final case class Input(
@@ -19,7 +20,7 @@ final case class Input(
     isReadOnly: Boolean,
     value: String,
     classNames: Set[String],
-    themeOverride: Option[InputTheme => InputTheme]
+    themeOverride: ThemeOverride[InputTheme]
 ) extends UIElement.Stateful[Input, InputTheme]:
 
   def withPlaceholder(placeholder: String): Input =
@@ -48,14 +49,14 @@ final case class Input(
   def withClassNames(classes: Set[String]): Input =
     this.copy(classNames = classes)
 
-  def themeLens: Lens[Theme.Styles, InputTheme] =
+  def themeLens: Lens[Theme.Default, InputTheme] =
     Lens(
       _.input,
       (t, i) => t.copy(input = i)
     )
 
-  def withThemeOverride(f: InputTheme => InputTheme): Input =
-    this.copy(themeOverride = Some(f))
+  def withThemeOverride(value: ThemeOverride[InputTheme]): Input =
+    this.copy(themeOverride = value)
 
   def update: GlobalMsg => Outcome[Input] =
     case TextInputMsg.Changed(_key, v) if _key == key =>
@@ -80,10 +81,10 @@ final case class Input(
 
     val styles =
       theme match
-        case Theme.NoStyles =>
+        case Theme.None =>
           Style.empty
 
-        case tt: Theme.Styles =>
+        case tt: Theme.Default =>
           if isDisabled then tt.input.toDisabledStyles(theme)
           else tt.input.toStyles(theme)
 
@@ -114,7 +115,7 @@ object Input:
       isReadOnly = false,
       value = "",
       Set.empty,
-      None
+      ThemeOverride.NoOverride
     )
 
 enum TextInputMsg extends GlobalMsg: