From d6a80b96745b1c1722d170bbf7b2068c8acbe1f7 Mon Sep 17 00:00:00 2001
From: leah <uncenter@uncenter.dev>
Date: Thu, 27 Aug 2026 02:06:52 -0400
Subject: [PATCH 1/2] Ufeat(lib): add mediawiki lib module (#1866)

* feat(lib): add mediawiki lib module

* fix(lib/mediawiki): remove site specific styling

* refactor(lib/mediawiki)!: nest utilities under namespace

* fix(lib/mediawiki): adjust border colors slightly

* fix(lib/mediawiki): adjust borders further

* feat(lib/mediawiki): use codex style guide (#1962)

* feat(lib/mediawiki): use codex style guide to base colour choices

* chore(lib/mediawiki): comment nits

* fix(lib/mediawiki): change button quiet hover colours to fade accent

* fix(mediawiki): remove redundant transparent variables

* fix(lib/mediawiki): change tab list framed state colours to latte fade

---------

Co-authored-by: uncenter <uncenter@uncenter.dev>

* feat(lib/mediawiki): radio inputs

* refactor(lib/mediawiki): move to versioned path

---------

Co-authored-by: WalkQuackBack <quacksareback@duck.com>
---
 lib/mediawiki/v1.less | 534 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 534 insertions(+)
 create mode 100644 lib/mediawiki/v1.less

diff --git a/lib/mediawiki/v1.less b/lib/mediawiki/v1.less
new file mode 100644
index 0000000000..51dac9c797
--- /dev/null
+++ b/lib/mediawiki/v1.less
@@ -0,0 +1,534 @@
+#__mediawiki {
+  .reset() {
+    html.skin-theme-clientpref-night, html.skin-theme-clientpref-os {
+      /* Logo */
+      .skin-invert-image img,
+      .skin-invert,
+      .oo-ui-iconElement-icon:not(
+        .oo-ui-image-progressive,
+        .oo-ui-image-destructive,
+        .oo-ui-checkboxInputWidget-checkIcon,
+        .oo-ui-image-invert,
+        .mw-no-invert
+      ),
+      .oo-ui-indicatorElement-indicator {
+        filter: none;
+      }
+    }
+
+    /* MediaWiki only applies the following overrides on dark and automatic appearance settings, leaving broken elements with the light appearance. */
+
+    .hatnote:not(.notheme),
+    .dablink:not(.notheme),
+    .rellink:not(.notheme),
+    .infobox:not(.notheme) {
+      color: var(--color-base) !important;
+      background-color: var(--background-color-interactive-subtle) !important;
+    }
+    .infobox td:not(.notheme),
+    .infobox th:not(.notheme),
+    .infobox-above:not(.notheme),
+    .infobox p:not(.notheme),
+    .infobox > div:not(.notheme),
+    .infobox caption:not(.notheme),
+    .infobox--frwiki td:not(.notheme),
+    .infobox--frwiki th:not(.notheme),
+    .infobox--frwiki p:not(.notheme),
+    .infobox--frwiki > div:not(.notheme),
+    .infobox--frwiki caption:not(.notheme),
+    .sinottico th:not(.notheme),
+    .infobox-header:not(.notheme),
+    .skin-nightmode-reset-color:not(.notheme),
+    .navigation-box:not(.notheme),
+    .metadata:not(.notheme),
+    .quotebox:not(.notheme),
+    .side-box:not(.notheme),
+    .side-box div:not(.notheme),
+    .navbox:not(.notheme),
+    .navbox-subgroup:not(.notheme),
+    .navbox-group:not(.notheme),
+    .navbox-even:not(.notheme),
+    .navbox-abovebelow:not(.notheme),
+    .navbox-title:not(.notheme) {
+      background: inherit !important;
+      color: inherit !important;
+      border-color: var(--border-color-subtle) !important;
+    }
+    .ns-100 .mw-parser-output :not(.notheme, a) {
+      background: inherit !important;
+      color: inherit !important;
+      border-color: var(--border-color-subtle) !important;
+    }
+  }
+
+  .base() {
+    --color-base: @text;
+    --color-base--hover: @text;
+    --color-emphasized: @text;
+    --color-subtle: @subtext0;
+
+    --color-inverted: @base;
+    // Locked to base as it is often used on accent,
+    // The same as color-inverted in light mode, but does not change in dark mode. Use this for things that should be white in both modes.
+    --color-inverted-fixed: @base;
+
+    --color-progressive: @accent;
+    --color-progressive--hover: lighten(@accent, 5%);
+    --color-progressive--active: darken(@accent, 10%);
+    --color-progressive--focus: darken(@accent, 10%);
+
+    --color-destructive: @red;
+    --color-destructive--hover: @maroon;
+    --color-destructive--active: darken(@red, 4%);
+    --color-destructive--visited: spin(@red, 15);
+
+    --color-visited: @lavender;
+
+    --color-error: @red;
+    --color-warning: @yellow;
+    --color-success: @green;
+    --color-notice: @text;
+
+    --color-icon-error: @red;
+    --color-icon-warning: @yellow;
+    --color-icon-success: @green;
+    --color-icon-notice: @subtext0;
+
+    --color-content-added: @green;
+    --color-content-removed: @maroon;
+    --color-placeholder: @subtext0;
+    --color-disabled: @overlay2;
+
+    --box-shadow-color-base: @overlay0;
+    --box-shadow-color-progressive--active: fade(@accent, 10%);
+    --box-shadow-color-progressive--focus: fade(@accent, 50%);
+    --box-shadow-color-progressive-selected: fade(@accent, 60%);
+    --box-shadow-color-progressive-selected--hover: fade(@accent, 70%);
+    --box-shadow-color-progressive-selected--active: fade(@accent, 80%);
+    --box-shadow-color-destructive--focus: fade(@accent, 50%);
+    --box-shadow-color-inverted: @base;
+    --box-shadow-color-alpha-base: rgba(0, 0, 0, 0.87);
+    --box-shadow-color-transparent: transparent;
+
+    // Background colors for static elements (for page layout, sections, etc.) from here on.
+    --background-color-base: @base;
+    // The same as background-color-base in light mode, but does not change in dark mode. Use this for things that should be white in both modes.
+    --background-color-base-fixed: @catppuccin[@latte][@base];
+    --background-color-neutral: @surface0;
+    --background-color-neutral-subtle: mix(@surface0, @base, 50%);
+    --background-color-interactive: @surface0;
+    --background-color-interactive--hover: @surface1;
+    --background-color-interactive--active: @surface2;
+    --background-color-interactive-subtle: mix(@surface0, @base, 50%);
+    --background-color-interactive-subtle--hover: @surface0;
+    --background-color-interactive-subtle--active: @surface1;
+    --background-color-disabled: @surface1;
+    --background-color-disabled-subtle: @surface0;
+    --background-color-inverted: @text;
+
+    --background-color-progressive: @accent;
+    --background-color-progressive--hover: darken(@accent, 5%);
+    --background-color-progressive--active: darken(@accent, 10%);
+    --background-color-progressive--focus: lighten(@accent, 10%);
+    --background-color-progressive-subtle: mix(@accent, @base, 30%);
+    --background-color-progressive-subtle--hover: lighten(
+      mix(@accent, @base, 30%),
+      5%
+    );
+    --background-color-progressive-subtle--active: lighten(
+      mix(@accent, @base, 30%),
+      10%
+    );
+
+    --background-color-destructive: @red;
+    --background-color-destructive--hover: darken(@red, 5%);
+    --background-color-destructive--active: darken(@red, 10%);
+    --background-color-destructive--focus: lighten(@accent, 10%);
+    --background-color-destructive-subtle: mix(@red, @base, 30%);
+    --background-color-destructive-subtle--hover: lighten(
+      mix(@red, @base, 30%),
+      5%
+    );
+    --background-color-destructive-subtle--active: lighten(
+      mix(@red, @base, 30%),
+      10%
+    );
+
+    --background-color-error: @red;
+    --background-color-error--hover: darken(@red, 5%);
+    --background-color-error--active: darken(@red, 10%);
+    --background-color-error-subtle: mix(@red, @base, 30%);
+    --background-color-error-subtle--hover: lighten(mix(@red, @base, 30%), 5%);
+    --background-color-error-subtle--active: lighten(
+      mix(@red, @base, 30%),
+      10%
+    );
+
+    --background-color-warning-subtle: mix(@yellow, @base, 30%);
+    --background-color-success-subtle: mix(@green, @base, 30%);
+    --background-color-notice-subtle: mix(@text, @base, 30%);
+
+    --background-color-content-added: mix(@blue, @base, 30%);
+    --background-color-content-removed: mix(@yellow, @base, 30%);
+
+    --background-color-backdrop-light: fade(@base, 65%);
+    --background-color-backdrop-dark: fade(@text, 65%);
+
+    --background-color-button-quiet--hover: fade(@accent, 2.7%);
+    --background-color-button-quiet--active: fade(@accent, 8.2%);
+
+    --background-color-input-binary--checked: @accent;
+
+    --background-color-tab-list-item-framed--hover: fade(
+      @catppuccin[@latte][@base],
+      30%
+    );
+    --background-color-tab-list-item-framed--active: fade(
+      @catppuccin[@latte][@base],
+      65%
+    );
+
+    --border-base: 1px solid var(--border-color-base);
+    --border-subtle: 1px solid var(--border-color-subtle);
+
+    --border-color-base: @overlay0;
+    --border-color-emphasized: @text;
+    --border-color-subtle: @surface2;
+    --border-color-muted: @surface1;
+    --border-color-interactive: @overlay0;
+    --border-color-interactive--hover: @overlay1;
+    --border-color-interactive--active: @overlay2;
+    --border-color-disabled: @overlay0;
+    --border-color-inverted: @base;
+    // The same as color-inverted in light mode, but does not change in dark mode. Use this for things that should be white in both modes.
+    --border-color-inverted-fixed: @catppuccin[@latte][@base];
+
+    --border-color-progressive: var(--color-progressive);
+    --border-color-progressive--hover: var(--color-progressive--hover);
+    --border-color-progressive--active: var(--color-progressive--active);
+    --border-color-progressive--focus: var(--color-progressive--focus);
+    --border-color-destructive: var(--color-destructive);
+    --border-color-destructive--hover: var(--color-destructive--hover);
+    --border-color-destructive--active: var(--color-destructive--active);
+    --border-color-destructive--focus: var(--color-destructive--focus);
+    --border-color-error: var(--color-error);
+    --border-color-error--hover: var(--color-error--hover);
+    --border-color-error--active: var(--color-error--active);
+    --border-color-warning: var(--color-warning);
+    --border-color-warning--hover: var(--color-warning--hover);
+    --border-color-warning--active: var(--color-warning--active);
+    --border-color-success: var(--color-success);
+    --border-color-notice: var(--color-notice);
+    --border-color-content-added: var(--color-content-added);
+    --border-color-content-removed: var(--color-content-removed);
+
+    --border-color-divider: @overlay1;
+    --border-color-input--hover: var(--border-color-interactive);
+    --border-color-input-binary: var(--border-color-interactive);
+    --border-color-input-binary--hover: var(--border-color-progressive--hover);
+    --border-color-input-binary--active: var(
+      --border-color-progressive--active
+    );
+    --border-color-input-binary--focus: var(--border-color-progressive--focus);
+    --border-color-input-binary--checked: var(--border-color-progressive);
+
+    /* Other */
+
+    .infobox {
+      border-color: @surface2;
+    }
+
+    [style="color:white;"], [style*="color:#ffffff"] {
+      color: @text !important;
+    }
+    .mw-collapsible-toggle-default {
+      &::before, &::after {
+        color: @subtext0;
+      }
+    }
+
+    a {
+      &:focus {
+        outline-color: @accent;
+      }
+    }
+
+    .mw-parser-output {
+      a.external {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="@{accent}" d="M6 1h5v5L8.86 3.85 4.7 8 4 7.3l4.15-4.16zM2 3h2v1H2v6h6V8h1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1"/></svg>'
+        );
+        background-image: url("data:image/svg+xml,@{svg}");
+      }
+    }
+
+    /* Math equations */
+    .mwe-math-element img.skin-invert {
+      filter: @text-filter;
+    }
+
+    /* OOUI */
+    .oo-ui-indicator-down {
+      filter: @text-filter !important;
+    }
+    .oo-ui-image-invert.oo-ui-icon-check, .mw-ui-icon-check-invert::before {
+      @svg: escape(
+        '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M7 14.2 2.8 10l-1.4 1.4L7 17 19 5l-1.4-1.4z" fill="@{crust}"/></svg>'
+      );
+      background-image: url("data:image/svg+xml,@{svg}");
+    }
+
+    .oo-ui-radioInputWidget [type="radio"] + span {
+      background-color: @text;
+    }
+
+    .cdx-radio__input:enabled:checked + .cdx-radio__icon,
+    .oo-ui-radioInputWidget [type="radio"]:checked + span {
+      background-color: @base;
+    }
+
+    /* View source */
+    textarea {
+      background-color: @mantle;
+      color: @text;
+    }
+
+    /* View history */
+    .flaggedrevs-color-1 {
+      background-color: fade(@blue, 10%);
+    }
+
+    /* Language search and settings */
+    .uls-search,
+    .uls-filtersuggestion,
+    .uls-lcd,
+    #uls-settings-block.uls-settings-block--vector-2022.uls-settings-block--with-add-languages,
+    #language-settings-dialog,
+    #languagesettings-settings-panel,
+    .uls-language-settings-close-block {
+      background-color: @mantle;
+    }
+    .uls-language-block a {
+      color: @accent;
+    }
+    .uls-search-label,
+    #uls-settings-block.uls-settings-block--vector-2022
+      > button.uls-add-languages-button,
+    #uls-settings-block.uls-settings-block--vector-2022
+      > button.uls-language-settings-button,
+    #uls-settings-block.uls-settings-block--vector-2022
+      > button.uls-language-settings-button:hover,
+    .uls-icon-close,
+    .uls-languagefilter-clear {
+      filter: @text-filter;
+    }
+    .uls-sub-panel, .language-settings-buttons {
+      border-color: @surface1;
+    }
+    .uls-language-block > ul > li:hover {
+      background-color: @surface0;
+    }
+    .languagesettings-menu .menu-section.active {
+      background-color: @surface1;
+    }
+
+    /* Page preview */
+    .mwe-popups .mwe-popups-extract[dir="ltr"]::after {
+      background-image: linear-gradient(to right, transparent, @base 50%);
+    }
+    .mwe-popups .mwe-popups-extract[dir="rtl"]::after {
+      background-image: linear-gradient(to left, transparent, @base 50%);
+    }
+
+    /* Icons */
+
+    .vector-page-titlebar
+      .mw-portlet-lang
+      .vector-dropdown-label.cdx-button--action-progressive.cdx-button--weight-quiet::after {
+      @svg: escape(
+        '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="@{accent}" d="m11.05 3.996-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5z"/></svg>'
+      );
+      background-image: url("data:image/svg+xml,@{svg}") !important;
+      filter: none;
+    }
+
+    .vector-icon {
+      filter: none !important;
+
+      &.mw-ui-icon-wikimedia-menu {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M1 3v2h18V3zm0 8h18V9H1zm0 6h18v-2H1z" fill="@{text}"/></svg>'
+        );
+        content: url("data:image/svg+xml,@{svg}");
+      }
+
+      &.mw-ui-icon-wikimedia-ellipsis {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g fill="@{text}"><circle cx="10" cy="10" r="2"/><circle cx="3" cy="10" r="2"/><circle cx="17" cy="10" r="2"/></g></svg>'
+        );
+        content: url("data:image/svg+xml,@{svg}");
+      }
+
+      &.mw-ui-icon-wikimedia-appearance {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.25 14.5a4.25 4.25 0 0 0 4.247-4.092c.3-.21.706-.21 1.006 0a4.25 4.25 0 0 0 8.431.59L19 11a1 1 0 1 0-.182-1.984 4.252 4.252 0 0 0-7.896-.615 2.9 2.9 0 0 0-1.844 0 4.25 4.25 0 0 0-7.896.615 1 1 0 1 0-.116 1.981A4.25 4.25 0 0 0 5.25 14.5m0-2a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5M17 10.25a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0" fill="@{text}"/></svg>'
+        );
+        content: url("data:image/svg+xml,@{svg}");
+      }
+
+      &.mw-ui-icon-wikimedia-expand {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="@{text}" d="m11.05 3.996-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5z"/></svg>'
+        );
+        background-image: url("data:image/svg+xml,@{svg}") !important;
+      }
+
+      &.mw-ui-icon-wikimedia-language-progressive {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M20 18h-1.44a.6.6 0 0 1-.4-.12.8.8 0 0 1-.23-.31L17 15h-5l-1 2.54a.8.8 0 0 1-.22.3.6.6 0 0 1-.4.14H9l4.55-11.47h1.89zm-3.53-4.31L14.89 9.5a12 12 0 0 1-.39-1.24q-.09.37-.19.69l-.19.56-1.58 4.19zm-6.3-1.58a13.4 13.4 0 0 1-2.91-1.41 11.46 11.46 0 0 0 2.81-5.37H12V4H7.31a4 4 0 0 0-.2-.56C6.87 2.79 6.6 2 6.6 2l-1.47.5s.4.89.6 1.5H0v1.33h2.15A11.23 11.23 0 0 0 5 10.7a17.2 17.2 0 0 1-5 2.1q.56.82.87 1.38a23.3 23.3 0 0 0 5.22-2.51 15.6 15.6 0 0 0 3.56 1.77zM3.63 5.33h4.91a8.1 8.1 0 0 1-2.45 4.45 9.1 9.1 0 0 1-2.46-4.45" fill="@{accent}"/></svg>'
+        );
+        background-image: url("data:image/svg+xml,@{svg}") !important;
+      }
+
+      &.mw-ui-icon-wikimedia-language {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M20 18h-1.44a.6.6 0 0 1-.4-.12.8.8 0 0 1-.23-.31L17 15h-5l-1 2.54a.8.8 0 0 1-.22.3.6.6 0 0 1-.4.14H9l4.55-11.47h1.89zm-3.53-4.31L14.89 9.5a12 12 0 0 1-.39-1.24q-.09.37-.19.69l-.19.56-1.58 4.19zm-6.3-1.58a13.4 13.4 0 0 1-2.91-1.41 11.46 11.46 0 0 0 2.81-5.37H12V4H7.31a4 4 0 0 0-.2-.56C6.87 2.79 6.6 2 6.6 2l-1.47.5s.4.89.6 1.5H0v1.33h2.15A11.23 11.23 0 0 0 5 10.7a17.2 17.2 0 0 1-5 2.1q.56.82.87 1.38a23.3 23.3 0 0 0 5.22-2.51 15.6 15.6 0 0 0 3.56 1.77zM3.63 5.33h4.91a8.1 8.1 0 0 1-2.45 4.45 9.1 9.1 0 0 1-2.46-4.45" fill="@{text}"/></svg>'
+        );
+        background-image: url("data:image/svg+xml,@{svg}") !important;
+      }
+
+      &.mw-ui-icon-wikimedia-listBullet {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="@{text}"><path d="M7 15h12v2H7zm0-6h12v2H7zm0-6h12v2H7z"/><circle cx="3" cy="4" r="2"/><circle cx="3" cy="10" r="2"/><circle cx="3" cy="16" r="2"/></svg>'
+        );
+        background-image: url("data:image/svg+xml,@{svg}") !important;
+      }
+
+      &.mw-ui-icon-wikimedia-fullScreen {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M1 1v6h2V3h4V1zm2 12H1v6h6v-2H3zm14 4h-4v2h6v-6h-2zm0-16h-4v2h4v4h2V1z" fill="@{text}"/></svg>'
+        );
+        background-image: url("data:image/svg+xml,@{svg}");
+      }
+
+      &.mw-ui-icon-wikimedia-userAvatar {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g fill="@{text}"><path d="M10 11c-5.92 0-8 3-8 5v3h16v-3c0-2-2.08-5-8-5"/><circle cx="10" cy="5.5" r="4.5"/></g></svg>'
+        );
+        background-image: url("data:image/svg+xml,@{svg}");
+      }
+
+      &.mw-ui-icon-wikimedia-watchlist {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M1 3h16v2H1Zm0 6h6v2H1Zm0 6h8v2H1Zm8-4.24h3.85L14.5 7l1.65 3.76H20l-3 3.17.9 4.05-3.4-2.14L11.1 18l.9-4.05Z" fill="@{text}"/></svg>'
+        );
+        background-image: url("data:image/svg+xml,@{svg}");
+      }
+
+      &.mw-ui-icon-wikimedia-tray {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M3 1a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm14 12h-4l-1 2H8l-1-2H3V3h14z" fill="@{text}"/></svg>'
+        );
+        background-image: url("data:image/svg+xml,@{svg}");
+      }
+
+      &.mw-ui-icon-wikimedia-bell {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M16 7a5.38 5.38 0 0 0-4.46-4.85C11.6 1.46 11.53 0 10 0S8.4 1.46 8.46 2.15A5.38 5.38 0 0 0 4 7v6l-2 2v1h16v-1l-2-2zm-6 13a3 3 0 0 0 3-3H7a3 3 0 0 0 3 3" fill="@{text}"/></svg>'
+        );
+        background-image: url("data:image/svg+xml,@{svg}");
+      }
+
+      &.mw-ui-icon-wikimedia-star {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7zm-10 6.9-3.76 2.27 1-4.28L3.5 8.5h4.61L10 4.6l1.9 3.9h4.6l-3.73 3.4 1 4.28z" fill="@{text}"/></svg>'
+        );
+        background-image: url("data:image/svg+xml,@{svg}");
+      }
+
+      &.mw-ui-icon-wikimedia-userTalk {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M18 0H2a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2m-4 4a1.5 1.5 0 1 1-1.5 1.5A1.5 1.5 0 0 1 14 4M6 4a1.5 1.5 0 1 1-1.5 1.5A1.5 1.5 0 0 1 6 4m4 8c-2.61 0-4.83-.67-5.65-3h11.3c-.82 2.33-3.04 3-5.65 3" fill="@{text}"/></svg>'
+        );
+        background-image: url("data:image/svg+xml,@{svg}");
+      }
+
+      &.mw-ui-icon-wikimedia-sandbox {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M8 12V9l6-6 3 3-6 6zm10-7-3-3 2-2 3 3zM8 2h2v2H8zM4 2h2v2H4zM0 3a1 1 0 0 1 1-1h1v2H0zm0 3h2v2H0zm0 4h2v2H0zm0 4h2v2H0zm0 4h2v2H1a1 1 0 0 1-1-1zm4 0h2v2H4zm4 0h2v2H8zm4 0h2v1a1 1 0 0 1-1 1h-1zm0-4h2v2h-2z" fill="@{text}"/></svg>'
+        );
+        background-image: url("data:image/svg+xml,@{svg}");
+      }
+
+      &.mw-ui-icon-wikimedia-settings {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20"><g fill="@{text}"><g xmlns:xlink="http://www.w3.org/1999/xlink" transform="translate(10 10)"><path id="a" d="M1.5-10h-3l-1 6.5h5m0 7h-5l1 6.5h3"/><use xlink:href="#a" transform="rotate(45)"/><use xlink:href="#a" transform="rotate(90)"/><use xlink:href="#a" transform="rotate(135)"/></g><path d="M10 2.5a7.5 7.5 0 0 0 0 15 7.5 7.5 0 0 0 0-15v4a3.5 3.5 0 0 1 0 7 3.5 3.5 0 0 1 0-7"/></g></svg>'
+        );
+        background-image: url("data:image/svg+xml,@{svg}");
+      }
+
+      &.mw-ui-icon-wikimedia-unStar {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7z" fill="@{text}"/></svg>'
+        );
+        background-image: url("data:image/svg+xml,@{svg}");
+      }
+
+      &.mw-ui-icon-wikimedia-labFlask {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M13 7.61V3h1V1H6v2h1v4.61l-5.86 9.88A1 1 0 0 0 2 19h16a1 1 0 0 0 .86-1.51zm-4.2.88a1 1 0 0 0 .2-.6V3h2v4.89a1 1 0 0 0 .14.51l2.14 3.6H6.72z" fill="@{text}"/></svg>'
+        );
+        background-image: url("data:image/svg+xml,@{svg}");
+      }
+
+      &.mw-ui-icon-wikimedia-userContributions {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g fill="@{text}"><circle cx="15.5" cy="10.5" r="2.5"/><path d="M1 15h8v2H1Zm0-6h10v2H1Zm0-6h16v2H1Zm14.5 10.6c-3.3 0-4.5 1.6-4.5 2.7V18h9v-1.7c0-1-1.2-2.7-4.5-2.7"/></g></svg>'
+        );
+        background-image: url("data:image/svg+xml,@{svg}");
+      }
+
+      &.mw-ui-icon-wikimedia-logOut {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g fill="@{text}"><path d="M3 3h8V1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8v-2H3z"/><path d="M13 5v4H5v2h8v4l6-5z"/></g></svg>'
+        );
+        background-image: url("data:image/svg+xml,@{svg}");
+      }
+
+      &.mw-ui-icon-wikimedia-search {
+        @svg: escape(
+          '<svg fill="@{text}" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM13 8A5 5 0 1 1 3 8a5 5 0 0 1 10 0"/></svg>'
+        );
+        background-image: url("data:image/svg+xml,@{svg}");
+      }
+
+      &.mw-ui-icon-wikimedia-edit {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="m16.77 8 1.94-2a1 1 0 0 0 0-1.41l-3.34-3.3a1 1 0 0 0-1.41 0L12 3.23zM1 14.25V19h4.75l9.96-9.96-4.75-4.75z" fill="@{text}"/></svg>'
+        );
+        background-image: url("data:image/svg+xml,@{svg}");
+      }
+
+      &.mw-ui-icon-wikimedia-history {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g fill="@{text}"><path d="M9 6v5h.06l2.48 2.47 1.41-1.41L11 10.11V6z"/><path d="M10 1a9 9 0 0 0-7.85 13.35L.5 16H6v-5.5l-2.38 2.38A7 7 0 1 1 10 17v2a9 9 0 0 0 0-18"/></g></svg>'
+        );
+        background-image: url("data:image/svg+xml,@{svg}");
+      }
+
+      &.mw-ui-icon-wikimedia-speechBubbles {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g fill="@{text}"><path d="M17 4v7a2 2 0 0 1-2 2H4v1a2 2 0 0 0 2 2h10l4 4V6a2 2 0 0 0-2-2zM6 10H0v6z"/><rect width="16" height="12" rx="2"/></g></svg>'
+        );
+        background-image: url("data:image/svg+xml,@{svg}");
+      }
+
+      &.mw-ui-icon-wikimedia-editLock {
+        @svg: escape(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M12 12a2 2 0 0 1-2-2V5.25l-9 9V19h4.75l7-7zm7-8h-.5V2.5a2.5 2.5 0 0 0-5 0V4H13a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1m-3 4a1 1 0 1 1 1-1 1 1 0 0 1-1 1m1.5-4h-3V2.75C14.5 2 14.5 1 16 1s1.5 1 1.5 1.75z" fill="@{text}"/></svg>'
+        );
+        background-image: url("data:image/svg+xml,@{svg}");
+      }
+    }
+  }
+}

From 7fba4b34fa82270e1c98bcd84bbd20a8b4480251 Mon Sep 17 00:00:00 2001
From: leah <uncenter@uncenter.dev>
Date: Sun, 30 Aug 2026 20:51:39 -0400
Subject: [PATCH 2/2] docs: add userstyles review tips page (#2005)

Co-authored-by: leah <uncenter@uncenter.dev>
Co-authored-by: WalkQuackBack <quacksareback@duck.com>
---
 .../contributing/maintainers/reviewing.md     | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 docs/src/content/docs/contributing/maintainers/reviewing.md

diff --git a/docs/src/content/docs/contributing/maintainers/reviewing.md b/docs/src/content/docs/contributing/maintainers/reviewing.md
new file mode 100644
index 0000000000..c0c9074ced
--- /dev/null
+++ b/docs/src/content/docs/contributing/maintainers/reviewing.md
@@ -0,0 +1,28 @@
+---
+title: Reviewing userstyles
+description: Notes for performing thorough new userstyle reviews.
+sidebar:
+  order: 1
+---
+
+A key tenant of the userstyles philosophy is starting with a complete version. Generally, we avoid merging new userstyles that do not fully theme the target application. Note that fully theming a set of (core) pages of the application, while _fully_ not theming other pages of the application, is acceptable. The reasoning for this strict policy is that userstyles maintainers come and go and it is difficult to depend on continued maintenance down the road. If a userstyle isn't initially complete, it is unlikely that more of it will be completed later.
+
+## Inspecting the user interface
+
+- Inspect login/signup pages. A small part of websites, but nice to theme nonetheless.
+- Be careful around hover and active states of buttons and button-like components.
+- Internal links referenced in the website's footer are often good test pages if you aren't familiar with the site.
+- Settings and profile pages are often missed details.
+- Small details with input elements to note are borders, hover/active/focus borders, placeholder text and icons (the former should be themed by the standard library's defaults, but not always).
+
+## Reviewing source code
+
+Even if a userstyle is well-_themed_, it's also important that it is maintainable and _written_ well. For example, if a userstyle themes a website by targeting individual element selectors, but the website primarily makes use of a set of CSS variables under the hood, it's generally worth switching to the latter.
+
+- Organization is key. Some strategies include organization by page or component type (e.g. buttons and inputs in one section, cards and surfaces in another, etc.). Consistent comment annotations is best.
+- Importantly, ensure palette colors are used aptly and appropriately.
+- Avoid overcorrections of palette colors, such as `darken` or `lighten` operations in large amounts (`darken` by 30% produces a color that is relatively distinct from the pastel palette).
+
+## Writing feedback and review comments
+
+When leaving a comment pointing out issues discovered in a review, it is important to make suggestions digestible and actionable. Provide links to relevant pages, descriptions of steps to access a certain component, and screenshots.