feat: update to v3 themeing

.pre-commit-config.yaml

@@ -1,5 +1,5 @@
 default_language_version:
-  python: "3.11"
+  python: "3.12"
 repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
     rev: v4.5.0

README.md

@@ -1,10 +1,10 @@
 # Litestar sphinx theme
 
 A Sphinx theme for the [Litestar organization](https://github.com/litestar-org), based on the
-[PyData Sphinx Theme](https://github.com/pydata/pydata-sphinx-theme).
+[Shibuya Theme](https://shibuya.lepture.com).
 
-It doesn't do much, mostly adjusting some colours a bit of layout and add a few default links and menus.
+It doesn't do much, mostly adjusting some colors a bit of layout and adding a few default links and menus.
 
-Refer to the [PyData Sphinx Theme documentation](https://pydata-sphinx-theme.readthedocs.io/en/latest/) for documentation.
+Refer to the [Shibuya Theme documentation](https://shibuya.lepture.com) for documentation.
 
 **This theme is not intended for general use**

litestar_sphinx_theme/__init__.py

@@ -30,27 +30,27 @@ def update_html_context(
 
     context["extra_navbar_items"] = theme_options.get("extra_navbar_items")
     context["use_page_nav"] = theme_options.get("use_page_nav", True)
-    context["github_repo_link"] = f"https://github.com/litestar-org/{theme_options['github_repo_name']}"
-    context["discord_link"] = theme_options.get(
+    context["github_url"] = f"https://github.com/litestar-org/{theme_options['github_repo_name']}"
+    context["discord_url"] = theme_options.get(
         "discord_link",
         "https://discord.gg/litestar-919193495116337154",
     )
-    context["twitter_link"] = theme_options.get(
+    context["twitter_url"] = theme_options.get(
         "twitter_link",
         "https://twitter.com/LitestarAPI",
     )
-    context["reddit_link"] = theme_options.get(
+    context["reddit_url"] = theme_options.get(
         "reddit_link",
-        "https://www.reddit.com/r/litestarapi",
+        "https://www.reddit.com/r/LitestarAPI",
     )
 
 
 def update_global_config(app: Sphinx) -> None:
     if not app.config["html_logo"]:
-        app.config["html_logo"] = "_static/logo.svg"
+        app.config["html_logo"] = "_static/logo-light.svg"
 
     if not app.config["html_favicon"]:
-        app.config["html_favicon"] = "_static/favicon.png"
+        app.config["html_favicon"] = "_static/favicon.svg"
 
     theme_options = _get_theme_options(app)
     if not theme_options:
@@ -60,23 +60,6 @@ def update_global_config(app: Sphinx) -> None:
     if not github_repo_name:
         msg = "GitHub URL not provided. Set 'github_repo_name=...' in html_theme_options"
         raise ValueError(msg)
-    icon_links = theme_options.setdefault("icon_links", [])
-    icon_links.extend(
-        [
-            {
-                "name": "GitHub",
-                "url": f"https://github.com/litestar-org/{github_repo_name}",
-                "icon": "fa-brands fa-github",
-                "type": "fontawesome",
-            },
-            {
-                "name": "Discord",
-                "url": "https://discord.gg/litestar-919193495116337154",
-                "icon": "fa-brands fa-discord",
-                "type": "fontawesome",
-            },
-        ],
-    )
 
 
 def setup(app: Sphinx) -> dict[str, bool]:

litestar_sphinx_theme/style.css

@@ -2,105 +2,81 @@
 @tailwind utilities;
 
 :root {
-  --litestar-blue: #202235;
-  --litestar-gold: #EDB641;
-  --litestar-yellow: #FFD480;
-  --litestar-gray: #DCDFE4;
-  --litestar-light: #ffffff;
-  --litestar-dark: #202020;
-}
-
-[aria-expanded="true"] .menu-state-indicator  {
-    transform: rotate(-180deg);
-}
-
-.menu-state-indicator {
-    transition: transform .2s ease;
-}
-
-table.docutils {
-  clear: left;
-  float: left;
-  margin: 0 1rem 1rem;
-}
-
-/* theme customization */
-
-html[data-theme="dark"] {
-  --color-background-primary: #18181b;
-  --color-background-secondary: #27272a;
-  --pst-color-on-background: #27272a;
-  --pst-color-border: #2f2f2f;
-  --pst-color-text-muted: #f3f4f6;
-  --pst-color-inline-code: var(--litestar-gray);
-}
-
-html[data-theme="light"] {
-  --color-background-primary: #f8f9fb;
-  --color-background-secondary: #fff;
-  --pst-color-text-muted: #111827;
-  --pst-color-inline-code: var(--litestar-blue);
-}
-
-html[data-theme="light"],
-html[data-theme="dark"] {
-  --pst-color-background: var(--color-background-primary);
-  --pst-color-primary: var(--litestar-gold);
-}
-
-html[data-theme="dark"] {
-  --pst-color-secondary: var(--litestar-light);
-}
-
-html[data-theme="light"] {
-  --pst-color-secondary: var(--litestar-dark);
-}
-
-h1, h2 {
-  color: unset;
-}
-
-@media (min-width: 960px) {
-  .bd-page-width {
-    max-width: 100rem;
-  }
-}
-
-.bd-sidebar-primary {
-  display: block;
-  flex: 0 0 18%;
-}
-
-.bd-header .navbar-nav .nav-item {
-  font-weight: 600;
-}
-
-.bd-content,
-.bd-sidebar-secondary {
-  background-color: var(--color-background-secondary);
-}
-
-.sd-tab-content {
-  box-shadow: 0 -0.0625rem var(--sd-color-tabs-overline);
-}
-
-div.literal-block-wrapper,
-pre {
-  border: none;
-}
-
-.code-block-caption {
-  background-color: var(--pst-color-surface);
-}
-
-.navbar-persistent--mobile {
-  margin-left: unset;
-}
-
-.navbar-persistent--mobile:last-of-type {
-  padding-left: 1rem;
-}
-
-#navbar-icon-links a {
-  padding-top: 0.2rem;
+    --litestar-blue: #202235;
+    --litestar-gold: #EDB641;
+    --litestar-yellow: #FFD480;
+    --litestar-gray: #DCDFE4;
+    --litestar-light: #ffffff;
+    --litestar-dark: #202020;
+
+    /* Leaving a lot of these commented for now, but these are available for editing. */
+    /*--accent-2: purple; !* TODO: unknown *!*/
+    /*--accent-3: var(--litestar-gray);  !* captions *!*/
+    --accent-9: var(--litestar-gold); /* the active link, hover link, left .. admonition:: border */
+    /*--accent-11: red; !* TODO: unknown *!*/
+
+    /*--accent-a2: rgba(32, 34, 53, 0.1); !* the background color of the code blocks *!*/
+    /*--accent-a3: rgb(32, 34, 53); !* .. admonition::, double backticks *!*/
+    /*--accent-a6: rgba(237, 182, 65, 0.96);  !* keyword highlighting, function/class names *!*/
+    /*--accent-a9: green; !* TODO: unknown *!*/
+    /*--accent-a11: rgba(237, 182, 65, 0.92); !* tab names, announcement banner, menu link hovers *!*/
+
+    --syntax-light-property: var(--litestar-gold);
+    --syntax-light-keyword: var(--litestar-blue);
+    --syntax-light-constant: var(--litestar-blue);
+    --syntax-light-text: var(--litestar-gold);
+
+    --syntax-dark-property: var(--litestar-gold);
+    --syntax-dark-keyword: var(--litestar-gray);
+    --syntax-dark-constant: var(--litestar-gold);
+    --syntax-dark-text: var(--litestar-gray);
+}
+
+#badges img {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+#home-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    column-gap: 20px;
+}
+
+@media (max-width: 600px) {
+    #home-head {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    #home-head a img {
+        width: 250px;
+        height: 250px;
+    }
+}
+
+#home-head h1 {
+    font-size: 4.2rem;
+    margin-top: 3.4rem;
+    margin-bottom: 1rem;
+    font-weight: 700;
+    line-height: 1.2;
+}
+
+#badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 3em;
+}
+
+.sponsor {
+    border-radius: 10px;
+    width: auto;
+    max-height: 150px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
 }