f5xc-docs-theme 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Robin Mordasiewicz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,68 @@
+# F5 XC Documentation Theme
+
+Branding assets for all F5 XC documentation sites. Changes pushed here are picked up automatically on the next build of any content site.
+
+## What's in this repo
+
+| Folder | Contents | What to edit |
+|--------|----------|--------------|
+| `fonts/` | Custom web fonts (woff2) and `font-face.css` declarations | Replace font files or update `font-face.css` to change typefaces |
+| `styles/` | `custom.css` -- colors, spacing, code blocks, Mermaid diagrams | Edit CSS variables and rules to change the look and feel |
+| `assets/` | `f5-logo.svg` -- sidebar logo | Replace the SVG to update the logo across all sites |
+| `components/` | `Footer.astro` -- custom footer with social links | Edit HTML/SVG to change footer links or icons |
+
+## How to make changes
+
+1. Edit the file you want to change (use the GitHub web editor or clone locally)
+2. Commit and push to `main`
+3. The next time any documentation site rebuilds, it will use your updated theme
+
+No npm, no build tools, no technical setup required.
+
+## File reference
+
+### Fonts (`fonts/`)
+
+- **`font-face.css`** -- Declares which font files to load and at which weights
+- **`neusaNextProWide-*.woff2`** -- Heading font (weights: 300, 400, 500, 700)
+- **`proximaNova-*.woff2`** -- Body text font (weights: 400, 500, 600, 700)
+
+To change a font: replace the `.woff2` file with a new one (keep the same filename), or update `font-face.css` to point to a different file.
+
+### Styles (`styles/custom.css`)
+
+Key CSS variables you can change:
+
+```css
+:root {
+  --sl-font: "proximaNova", ...;    /* Body font family */
+  --sl-content-width: 60rem;         /* Main content area width */
+  --sl-sidebar-width: 15rem;         /* Left sidebar width */
+}
+```
+
+The file also controls:
+- Heading font family
+- Mermaid diagram container styling (border, shadow, background)
+- Code block appearance (rounded corners, terminal-style header)
+- Aside/callout box styling
+
+### Logo (`assets/f5-logo.svg`)
+
+The SVG file displayed in the sidebar header. Replace it with any SVG file using the same filename.
+
+### Footer (`components/Footer.astro`)
+
+Custom footer with social media links (Facebook, X, LinkedIn, Instagram, YouTube). Edit the HTML to change links, add new icons, or update styling.
+
+## Architecture
+
+This repo is checked out at build time by the [f5xc-docs-builder](https://github.com/robinmordasiewicz/f5xc-docs-builder) reusable workflow into a `theme/` directory. The Astro config references these files as `./theme/fonts/...`, `./theme/styles/...`, etc.
+
+```
+Content repo push
+  -> Builder workflow runs
+     -> Checks out this theme repo into builder/theme/
+     -> Astro build uses theme files
+     -> Site deployed with your branding
+```

package/assets/f5-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><g data-name="Layer 2"><g data-name="Layer 1"><path fill="#e4002b" d="M940.37 894.53a30.85 30.85 0 0 1 9.47 22.94 32.43 32.43 0 0 1-55.4 23.08 32 32 0 0 1-9.44-23.08 32.54 32.54 0 0 1 32.37-32.57 30.88 30.88 0 0 1 23 9.63m3.81-3.75a36.65 36.65 0 0 0-26.8-11 37.72 37.72 0 1 0 26.8 64.32 37.71 37.71 0 0 0 0-53.36ZM923 915.65a18.8 18.8 0 0 1-6.93.92h-6.54v-15h6.23c4 0 7 .57 8.77 1.58s2.76 3.07 2.76 6a6.38 6.38 0 0 1-4.29 6.5m-20.75 22.29h7.28v-16.28h5.77c3.82 0 6.56.4 8.11 1.36 2.57 1.54 3.88 4.72 3.88 9.48v3.33l.14 1.25a3 3 0 0 1 .11.5c0 .2.06.27.19.36h6.76l-.24-.48a4.4 4.4 0 0 1-.35-2.11c-.09-1.14-.09-2.15-.09-3.07v-3.07a11.5 11.5 0 0 0-2.26-6.43c-1.54-2.21-3.95-3.51-7.19-4.08a17 17 0 0 0 6-2c2.77-1.75 4.06-4.56 4.06-8.2 0-5.18-2.06-8.73-6.4-10.49-2.39-1-6.14-1.49-11.3-1.49h-14.47Z"/><path fill="#fff" d="M958.59 620.31c2.68-53.34-7.17-110.8-53.58-162.79-47.7-51.41-128.17-95-293.72-105.22 8.6-26.83 16.12-51.41 24.06-76.52 99 3.48 187.06 10.61 262 20.34 5.92-26.85 9.13-53.1 15.26-78.43Q901.2 201 888.43 185.25c-35.65-4.12-71.2-13-109.46-17.9-51.73-6.68-105.88-11.45-164.38-14.15C577.75 262.93 531.7 401 484.46 543.7 730.72 565 825.42 631.37 820.1 725c-4.91 50.57-51.14 96.55-111.93 102-72.31 4.86-105.41-24.35-127.14-56.4-19.14-28.78-38.23-57.62-58.61-89-5.54-9.23-12.85-3.23-19.44 3.21a9738 9738 0 0 1-43.84 42.28c-9.48 8.24-7.37 15.32-4 22.23 13.77 32.46 26.59 62.22 39.54 91.76 21.56 13.21 122.9 31.25 198.69 25.58 51.36-4.32 115.57-24.18 168.65-64.16 52.43-40.71 90.65-95.5 96.57-182.19"/><path fill="#fff" d="M97.31 796.3q14.22 19.29 30.2 37.13c85.19 15.32 191.42 25.91 302.05 29.13-.37-11.48-.7-22.63-1-34.46-67.94-3.83-99.17-14.19-104.6-27.63-4.53-10.68-5.32-26.63-6.29-42.38-5.1-104.35-6.77-217.22-5-330.51 38-.66 75.83-1 115.53-1.43 19.24-8.77 37.34-17.44 56.54-26 0-13.72.09-26 .09-39.39-58.83.24-114.65 1.24-170.6 2.79 1.58-47.62 3.45-91.58 6.24-134.46 2-28.18 21.51-48.78 41.64-50.39 32.26-1.26 61.23 11.56 89.27 24 15.46 7.49 30.7 14.94 46.54 23.05 7.56 2 16.54 3.78 21.95-2.79 9.39-11.12 18.31-21.45 27.55-32.26 5-7.39 2.84-11.63.79-14.35-20.12-15.89-39.05-30.18-58.21-44.54-11.83-8-30.51-9.76-48.92-9.76-7.34 0-14.71.27-21.55.49-18.92 1-43 4-82.43 13.62-88.81 23.92-195.43 85.84-206.7 187.11-1.45 16.53-2.66 32.9-3.73 49.81-25.08 2.11-47.91 3.92-69.46 6-1.58 19.36-2.64 38-3.52 57.59 21.82-1.28 44.58-2.42 69.94-3.52-3.76 106.16-.2 212.1 9.77 310.22 1.67 14.91 3.3 29.69 1.36 39.24-1.59 9.12-16.27 13.85-37.45 13.69"/><path fill="#e4002b" d="M912.66 217.69c-6.13 25.33-9.34 51.58-15.26 78.43-75-9.73-163.08-16.86-262-20.34-7.94 25.11-15.46 49.69-24.06 76.52 165.55 10.18 246 53.81 293.72 105.22 46.41 52 56.26 109.45 53.58 162.79-5.97 86.69-44.19 141.48-96.64 182.1-53.08 40-117.29 59.84-168.65 64.16-75.79 5.67-177.13-12.37-198.69-25.57-13-29.54-25.77-59.3-39.54-91.76-3.35-6.91-5.46-14 4-22.23a9738 9738 0 0 0 43.84-42.28c6.59-6.44 13.9-12.44 19.44-3.21 20.38 31.43 39.48 60.27 58.61 89 21.73 32.05 54.83 61.26 127.14 56.4 60.79-5.44 107-51.42 111.93-102 5.32-93.6-89.38-160-335.64-181.27C531.7 401 577.75 262.93 614.59 153.2c58.5 2.7 112.65 7.47 164.38 14.15 38.26 4.87 73.81 13.78 109.46 17.9C796.77 72.26 656.88 0 500 0 223.87 0 0 223.86 0 500a497.64 497.64 0 0 0 97.31 296.3c21.18.16 35.86-4.57 37.45-13.7 1.94-9.55.31-24.33-1.36-39.24-10-98.12-13.53-204.06-9.77-310.22-25.36 1.1-48.12 2.24-69.94 3.52.88-19.63 1.94-38.23 3.52-57.59 21.55-2.07 44.38-3.88 69.46-6 1.07-16.91 2.28-33.28 3.74-49.81C141.67 222 248.29 160.08 337.1 136.18c39.41-9.6 63.51-12.63 82.43-13.62 6.84-.22 14.21-.49 21.55-.49 18.41 0 37.09 1.72 48.92 9.76 19.16 14.36 38.09 28.65 58.22 44.54 2 2.72 4.2 7-.8 14.35-9.24 10.81-18.16 21.14-27.55 32.26-5.41 6.57-14.39 4.84-21.95 2.79-15.84-8.11-31.08-15.56-46.54-23.05-28-12.46-57-25.28-89.27-24-20.13 1.61-39.62 22.21-41.64 50.39-2.79 42.88-4.66 86.84-6.24 134.46C370.18 362 426 361 484.85 360.74c0 13.39-.09 25.67-.09 39.39-19.2 8.58-37.3 17.25-56.54 26-39.7.46-77.48.77-115.53 1.43-1.76 113.29-.09 226.16 5 330.51 1 15.75 1.76 31.7 6.29 42.38 5.43 13.44 36.66 23.8 104.6 27.63.27 11.83.6 23 1 34.46-110.63-3.22-216.86-13.81-302-29.13C219.07 935.63 352 1000 500 1000c276.15 0 500-223.87 500-500a497.6 497.6 0 0 0-87.34-282.31"/></g></g></svg>

package/components/Footer.astro

@@ -0,0 +1,52 @@
+---
+import Default from '@astrojs/starlight/components/Footer.astro';
+---
+
+<Default {...Astro.props}><slot /></Default>
+
+<div class="social-links">
+  <a href="https://www.facebook.com/f5incorporated" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#1877F2">
+      <path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 1.092.044 1.545.088v3.24h-1.099c-1.692 0-2.218.847-2.218 2.27v1.96h3.175l-.545 3.667H13.187v7.98h-4.086z"/>
+    </svg>
+  </a>
+  <a href="https://x.com/F5" target="_blank" rel="noopener noreferrer" aria-label="X">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/>
+    </svg>
+  </a>
+  <a href="https://www.linkedin.com/company/f5/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#0A66C2">
+      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+    </svg>
+  </a>
+  <a href="https://www.instagram.com/f5.global/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#E4405F">
+      <path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.8981-1.3783-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.8988.4227-.1644 1.0573-.3624 2.2271-.4171 1.2655-.0595 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.8988 1.3783.1645.4233.3633 1.058.4182 2.2272.0595 1.2645.0707 1.6443.079 4.848.0074 3.2033-.0053 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.8985-.4227.1644-1.0573.3624-2.2272.4171-1.2652.0595-1.6446.072-4.848.079-3.2037.007-3.5837-.005-4.8482-.0607M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.1738 6.1488 3.4032-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1504 6.1743M8.0757 12.005a3.92 3.92 0 0 1 3.9258-3.9146 3.9198 3.9198 0 0 1 3.9146 3.9257A3.9198 3.9198 0 0 1 11.99 15.94a3.92 3.92 0 0 1-3.9142-3.9353"/>
+    </svg>
+  </a>
+  <a href="https://www.youtube.com/user/f5networksinc" target="_blank" rel="noopener noreferrer" aria-label="YouTube">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#FF0000">
+      <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
+    </svg>
+  </a>
+</div>
+
+<style>
+  .social-links {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 1.25rem;
+    padding: 1rem 0 0.5rem;
+  }
+
+  .social-links a {
+    display: inline-flex;
+    transition: opacity 0.2s ease;
+  }
+
+  .social-links a:hover {
+    opacity: 0.7;
+  }
+</style>

package/fonts/font-face.css

@@ -0,0 +1,63 @@
+@font-face {
+  font-family: "neusaNextProWide";
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+  src: url("./neusaNextProWide-300.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "neusaNextProWide";
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  src: url("./neusaNextProWide-400.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "neusaNextProWide";
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+  src: url("./neusaNextProWide-500.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "neusaNextProWide";
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+  src: url("./neusaNextProWide-700.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "proximaNova";
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  src: url("./proximaNova-400.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "proximaNova";
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+  src: url("./proximaNova-500.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "proximaNova";
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+  src: url("./proximaNova-600.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "proximaNova";
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+  src: url("./proximaNova-700.woff2") format("woff2");
+}

package/index.ts

@@ -0,0 +1,23 @@
+import type { StarlightPlugin } from '@astrojs/starlight/types';
+
+export default function f5xcDocsTheme(): StarlightPlugin {
+  return {
+    name: 'f5xc-docs-theme',
+    hooks: {
+      setup({ config, updateConfig, logger }) {
+        updateConfig({
+          customCss: [
+            ...config.customCss,
+            'f5xc-docs-theme/fonts/font-face.css',
+            'f5xc-docs-theme/styles/custom.css',
+          ],
+          components: {
+            ...config.components,
+            Footer: 'f5xc-docs-theme/components/Footer.astro',
+          },
+        });
+        logger.info('F5 XC docs theme loaded');
+      },
+    },
+  };
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "f5xc-docs-theme",
+  "version": "1.0.0",
+  "description": "F5 Distributed Cloud branded Starlight documentation theme",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/robinmordasiewicz/f5xc-docs-theme"
+  },
+  "exports": {
+    ".": "./index.ts",
+    "./fonts/font-face.css": "./fonts/font-face.css",
+    "./styles/custom.css": "./styles/custom.css",
+    "./components/Footer.astro": "./components/Footer.astro",
+    "./assets/f5-logo.svg": "./assets/f5-logo.svg"
+  },
+  "files": [
+    "index.ts",
+    "fonts/",
+    "styles/",
+    "assets/",
+    "components/"
+  ],
+  "keywords": [
+    "starlight",
+    "theme",
+    "astro",
+    "withastro",
+    "starlight-theme",
+    "f5",
+    "documentation"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@astrojs/starlight": ">=0.34.0"
+  }
+}

package/styles/custom.css

@@ -0,0 +1,97 @@
+:root {
+  --sl-font: "proximaNova", -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif;
+  --sl-content-width: 60rem;
+  --sl-sidebar-width: 15rem;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "neusaNextProWide", -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif;
+}
+
+@media (min-width: 72rem) {
+  .right-sidebar-container {
+    max-width: 11rem;
+  }
+}
+
+.mermaid-container {
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.04),
+    0 8px 16px rgba(0, 0, 0, 0.08),
+    0 24px 48px rgba(0, 0, 0, 0.12);
+  margin-block: 1.5rem;
+  background: #fff;
+}
+
+/* Force white background on Mermaid SVG for dark mode compatibility */
+.mermaid-container svg {
+  background: white !important;
+  border-radius: 0.5rem;
+}
+
+.mermaid-container svg rect,
+.mermaid-container svg polygon {
+  fill: white !important;
+}
+
+.starlight-aside {
+  border-radius: 0.75rem;
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.04),
+    0 8px 16px rgba(0, 0, 0, 0.08),
+    0 24px 48px rgba(0, 0, 0, 0.12);
+}
+
+.expressive-code .frame {
+  --header-border-radius: 0.75rem;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.04),
+    0 8px 16px rgba(0, 0, 0, 0.08),
+    0 24px 48px rgba(0, 0, 0, 0.12);
+}
+
+/* macOS iTerm-style window frame for terminal code blocks */
+.expressive-code .frame.is-terminal {
+  border: 2px solid rgba(255, 255, 255, 0.15);
+}
+
+:root[data-theme="light"] .expressive-code .frame.is-terminal {
+  border-color: rgba(0, 0, 0, 0.2);
+}
+
+.expressive-code .frame.is-terminal .header {
+  padding-block: 0.25rem;
+  border: none;
+  border-radius: 0.75rem 0.75rem 0 0;
+  background: #323232 !important;
+  color: #ccc !important;
+}
+
+.expressive-code .frame.is-terminal .header::after {
+  border-bottom: none !important;
+}
+
+.expressive-code .frame.is-terminal .header::before {
+  -webkit-mask-image: none !important;
+  mask-image: none !important;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 12'%3E%3Ccircle cx='6' cy='6' r='6' fill='%23ff5f56'/%3E%3Cpath d='M3.8 3.8L8.2 8.2M8.2 3.8L3.8 8.2' stroke='%234d0000' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='26' cy='6' r='6' fill='%23ffbd2e'/%3E%3Cpath d='M23.5 6H28.5' stroke='%23995700' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='46' cy='6' r='6' fill='%2327c93f'/%3E%3Cpolygon points='43.5,3.5 43.5,6 46,3.5' fill='%23006500'/%3E%3Cpolygon points='48.5,8.5 48.5,6 46,8.5' fill='%23006500'/%3E%3C/svg%3E") no-repeat center / contain !important;
+  opacity: 1 !important;
+  width: 52px;
+  height: 12px;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.expressive-code .frame.is-terminal pre {
+  border: none;
+  border-radius: 0 0 0.75rem 0.75rem;
+}
+
+:root:not([data-theme="light"]) .expressive-code .frame.is-terminal pre {
+  background: #1a1b26 !important;
+}