Upgrade to 9.x

build.sbt

@@ -23,7 +23,7 @@ lazy val root = project("paradox-material-theme-parent", file("."))
     ),
     // #color
     Compile / paradoxMaterialTheme ~= {
-      _.withColor("teal", "indigo")
+      _.withColor("default", "teal", "indigo")
     }
     // #color
     ,
@@ -111,16 +111,14 @@ lazy val optionExamples = Def.settings(
   // #builder-api
   Compile / paradoxMaterialTheme := {
     ParadoxMaterialTheme()
-      .withColor("red", "orange")
-      .withLogoIcon("cloud")
+      .withColor("default", "red", "orange")
       .withCopyright("Copyleft © Jonas Fonseca")
   }
   // #builder-api
   ,
   // #builder-api-v2
   Compile / paradoxMaterialTheme ~= {
-    _.withColor("red", "orange")
-      .withLogoIcon("cloud")
+    _.withColor("default", "red", "orange")
       .withCopyright("Copyleft © Jonas Fonseca")
   }
   // #builder-api-v2
@@ -149,12 +147,6 @@ lazy val optionExamples = Def.settings(
   }
   // #logo
   ,
-  // #logo-icon
-  Compile / paradoxMaterialTheme ~= {
-    _.withLogoIcon("cloud")
-  }
-  // #logo-icon
-  ,
   // #logo-uri
   Compile / paradoxMaterialTheme ~= {
     _.withLogoUri(uri("https://example.org/logo.png"))

plugin/src/main/scala/com/github/sbt/paradox/material/theme/ParadoxMaterialTheme.scala

@@ -10,10 +10,12 @@ final case class ParadoxMaterialTheme(properties: Map[String, String]) {
   def withLanguage(locale: Locale) =
     withProperties("language" -> locale.getLanguage)
 
-  def withColor(primaryColor: String, accentColor: String) = {
+  def withColor(colorSchema: String, primaryColor: String, accentColor: String) = {
+    val schema = colorSchema.replace(" ", "-").toLowerCase
     val primary = primaryColor.replace(" ", "-").toLowerCase
     val accent = accentColor.replace(" ", "-").toLowerCase
     val colorProps = withProperties(
+      "color.schema" -> schema,
       "color.primary" -> primary,
       "color.accent" -> accent
     )
@@ -36,10 +38,11 @@ final case class ParadoxMaterialTheme(properties: Map[String, String]) {
       .withoutProperties("logo", "logo.icon")
   }
 
-  def withLogoIcon(icon: String) = {
-    withProperties("logo.icon" -> icon)
-      .withoutProperties("logo", "logo.uri")
-  }
+// FIXME solve font-awesome icon issue
+//  def withLogoIcon(icon: String) = {
+//    withProperties("logo.icon" -> icon)
+//      .withoutProperties("logo", "logo.uri")
+//  }
 
   def withFont(text: String, code: String) =
     withProperties(
@@ -115,7 +118,8 @@ object ParadoxMaterialTheme {
   def apply(): ParadoxMaterialTheme = {
     ParadoxMaterialTheme(Map.empty)
       .withFont("Roboto", "Roboto Mono")
-      .withLogoIcon("local_library")
+      // FIXME solve font-awesome icon issue
+      //  .withLogoIcon("local_library")
       .withFavicon("assets/images/favicon.png")
       .withSearch()
   }

plugin/src/main/scala/com/github/sbt/paradox/material/theme/SearchIndex.scala

@@ -9,17 +9,35 @@ import org.jsoup.nodes.Element
 import sbt._
 import sbt.Keys._
 
-final case class SearchIndex(docs: Seq[SearchIndex.Section])
+object SearchPipelineFn extends Enumeration {
+  type SearchPipelineFn = Value
+
+  val Trimmer: Value = Value("trimmer")
+  val StopWordFilter: Value = Value("stopWordFilter")
+  val Stemmer: Value = Value("stemmer")
+}
+
+final case class SearchIndex(docs: Seq[SearchIndex.Section], config: SearchIndex.SearchConfig)
 
 object SearchIndex {
-  implicit val encoder: Encoder[SearchIndex] = Encoder.forProduct1("docs")(_.docs)
+  implicit val encoder: Encoder[SearchIndex] = Encoder.forProduct2("config", "docs")(e => (e.config, e.docs))
 
   final case class Section(location: String, title: String, text: String)
   object Section {
     implicit val encoder: Encoder[Section] =
       Encoder.forProduct3("location", "text", "title")(page => (page.location, page.text, page.title))
   }
 
+  final case class SearchConfig(
+      lang: Seq[String],
+      separator: String,
+      pipeline: String
+  )
+  object SearchConfig {
+    implicit val encoder: Encoder[SearchConfig] =
+      Encoder.forProduct3("lang", "separator", "pipeline")(config => (config.lang, config.separator, config.pipeline))
+  }
+
   val Headers = Set("h1", "h2", "h3", "h4", "h5", "h6")
 
   def generate(target: File, mappings: Seq[(File, String)]): File = {
@@ -62,7 +80,9 @@ object SearchIndex {
     }
 
     val sections = mappings.flatMap(readSections).toList
-    val searchIndex = SearchIndex(sections)
+    // TODO configurable
+    val config = SearchConfig(Seq("en"), "[\\s\\-]+", SearchPipelineFn.StopWordFilter.toString)
+    val searchIndex = SearchIndex(sections, config)
     val json = searchIndex.asJson.noSpaces
     val out = target / "search_index.json"
     IO.write(out, json)

src/main/paradox/getting-started.md

@@ -81,66 +81,100 @@ See the guide on @ref:[customization](customization.md) for more information.
 
   [10]: http://www.materialui.co/colors
 
+### Color schema
+
+Click on a tile to change the color scheme:
+
+<div class="mdx-switch">
+  <button data-md-color-scheme="default"><code>default</code></button>
+  <button data-md-color-scheme="slate"><code>slate</code></button>
+</div>
+
+<script>
+  var buttons = document.querySelectorAll("button[data-md-color-scheme]")
+  buttons.forEach(function(button) {
+    button.addEventListener("click", function() {
+      document.body.setAttribute("data-md-color-switching", "")
+      var attr = this.getAttribute("data-md-color-scheme")
+      document.body.setAttribute("data-md-color-scheme", attr)
+    })
+  })
+</script>
+
 ### Primary colors
 
-Click on a tile to change the primary color of the theme:
-
-<button data-md-color-primary="red">Red</button>
-<button data-md-color-primary="pink">Pink</button>
-<button data-md-color-primary="purple">Purple</button>
-<button data-md-color-primary="deep-purple">Deep Purple</button>
-<button data-md-color-primary="indigo">Indigo</button>
-<button data-md-color-primary="blue">Blue</button>
-<button data-md-color-primary="light-blue">Light Blue</button>
-<button data-md-color-primary="cyan">Cyan</button>
-<button data-md-color-primary="teal">Teal</button>
-<button data-md-color-primary="green">Green</button>
-<button data-md-color-primary="light-green">Light Green</button>
-<button data-md-color-primary="lime">Lime</button>
-<button data-md-color-primary="yellow">Yellow</button>
-<button data-md-color-primary="amber">Amber</button>
-<button data-md-color-primary="orange">Orange</button>
-<button data-md-color-primary="deep-orange">Deep Orange</button>
-<button data-md-color-primary="brown">Brown</button>
-<button data-md-color-primary="grey">Grey</button>
-<button data-md-color-primary="blue-grey">Blue Grey</button>
-<button data-md-color-primary="white">White</button>
+Click on a tile to change the primary color:
+
+<div class="mdx-switch">
+  <button data-md-color-primary="red"><code>red</code></button>
+  <button data-md-color-primary="pink"><code>pink</code></button>
+  <button data-md-color-primary="purple"><code>purple</code></button>
+  <button data-md-color-primary="deep-purple"><code>deep purple</code></button>
+  <button data-md-color-primary="indigo"><code>indigo</code></button>
+  <button data-md-color-primary="blue"><code>blue</code></button>
+  <button data-md-color-primary="light-blue"><code>light blue</code></button>
+  <button data-md-color-primary="cyan"><code>cyan</code></button>
+  <button data-md-color-primary="teal"><code>teal</code></button>
+  <button data-md-color-primary="green"><code>green</code></button>
+  <button data-md-color-primary="light-green"><code>light green</code></button>
+  <button data-md-color-primary="lime"><code>lime</code></button>
+  <button data-md-color-primary="yellow"><code>yellow</code></button>
+  <button data-md-color-primary="amber"><code>amber</code></button>
+  <button data-md-color-primary="orange"><code>orange</code></button>
+  <button data-md-color-primary="deep-orange"><code>deep orange</code></button>
+  <button data-md-color-primary="brown"><code>brown</code></button>
+  <button data-md-color-primary="grey"><code>grey</code></button>
+  <button data-md-color-primary="blue-grey"><code>blue grey</code></button>
+  <button data-md-color-primary="black"><code>black</code></button>
+  <button data-md-color-primary="white"><code>white</code></button>
+</div>
 
 <script>
-  var buttons = document.querySelectorAll("button[data-md-color-primary]");
-  Array.prototype.forEach.call(buttons, function(button) {
+  var buttons = document.querySelectorAll("button[data-md-color-primary]")
+  buttons.forEach(function(button) {
     button.addEventListener("click", function() {
-      document.body.dataset.mdColorPrimary = this.dataset.mdColorPrimary;
+      var attr = this.getAttribute("data-md-color-primary")
+      document.body.setAttribute("data-md-color-primary", attr)
     })
   })
 </script>
 
 ### Accent colors
 
-Click on a tile to change the accent color of the theme:
-
-<button data-md-color-accent="red">Red</button>
-<button data-md-color-accent="pink">Pink</button>
-<button data-md-color-accent="purple">Purple</button>
-<button data-md-color-accent="deep-purple">Deep Purple</button>
-<button data-md-color-accent="indigo">Indigo</button>
-<button data-md-color-accent="blue">Blue</button>
-<button data-md-color-accent="light-blue">Light Blue</button>
-<button data-md-color-accent="cyan">Cyan</button>
-<button data-md-color-accent="teal">Teal</button>
-<button data-md-color-accent="green">Green</button>
-<button data-md-color-accent="light-green">Light Green</button>
-<button data-md-color-accent="lime">Lime</button>
-<button data-md-color-accent="yellow">Yellow</button>
-<button data-md-color-accent="amber">Amber</button>
-<button data-md-color-accent="orange">Orange</button>
-<button data-md-color-accent="deep-orange">Deep Orange</button>
+Click on a tile to change the accent color:
+
+<style>
+  .md-typeset button[data-md-color-accent] > code {
+    background-color: var(--md-code-bg-color);
+    color: var(--md-accent-fg-color);
+  }
+</style>
+
+<div class="mdx-switch">
+  <button data-md-color-accent="red"><code>red</code></button>
+  <button data-md-color-accent="pink"><code>pink</code></button>
+  <button data-md-color-accent="purple"><code>purple</code></button>
+  <button data-md-color-accent="deep-purple"><code>deep purple</code></button>
+  <button data-md-color-accent="indigo"><code>indigo</code></button>
+  <button data-md-color-accent="blue"><code>blue</code></button>
+  <button data-md-color-accent="light-blue"><code>light blue</code></button>
+  <button data-md-color-accent="cyan"><code>cyan</code></button>
+  <button data-md-color-accent="teal"><code>teal</code></button>
+  <button data-md-color-accent="green"><code>green</code></button>
+  <button data-md-color-accent="light-green"><code>light green</code></button>
+  <button data-md-color-accent="lime"><code>lime</code></button>
+  <button data-md-color-accent="yellow"><code>yellow</code></button>
+  <button data-md-color-accent="amber"><code>amber</code></button>
+  <button data-md-color-accent="orange"><code>orange</code></button>
+  <button data-md-color-accent="deep-orange"><code>deep orange</code></button>
+</div>
 
 <script>
-  var buttons = document.querySelectorAll("button[data-md-color-accent]");
-  Array.prototype.forEach.call(buttons, function(button) {
+  var buttons = document.querySelectorAll("button[data-md-color-accent]")
+  buttons.forEach(function(button) {
     button.addEventListener("click", function() {
-      document.body.dataset.mdColorAccent = this.dataset.mdColorAccent;
+      var attr = this.getAttribute("data-md-color-accent")
+      document.body.setAttribute("data-md-color-accent", attr)
     })
   })
 </script>
@@ -208,13 +242,6 @@ the logo using a URI:
 
 @@ snip [build.sbt]($root$/build.sbt) { #logo-uri }
 
-Additionally, the default icon can be changed by setting an arbitrary ligature
-(or Unicode code point) from the [Material Design icon font][16], e.g.
-
-@@ snip [build.sbt]($root$/build.sbt) { #logo-icon }
-
-  [16]: https://material.io/icons/
-
 ## Adding social links
 
 Social accounts can be linked in the footer of the documentation using an icon

src/main/paradox/specimen/front-matter.md

@@ -1,9 +1,7 @@
 ---
 material.color.primary: red
 material.color.accent: orange
-material.logo.icon: cloud
 material.copyright: Copyleft © Jonas Fonseca
-material.hero: This hero is set in the front-matter
 ---
 # Front matter
 
@@ -13,9 +11,7 @@ This page has been customized using [front matter].
 ---
 material.color.primary: red
 material.color.accent: orange
-material.logo.icon: cloud
 material.copyright: Copyleft © Jonas Fonseca
-material.hero: This hero is set in the front-matter
 ---
 ```