@volksverpetzer/ui-web 0.11.0 → 0.12.1

package/dist/Badge.css

@@ -58,3 +58,31 @@
   background: color-mix(in srgb, var(--vvp-pruefpunkt, #442674) 15%, white);
   color: var(--vvp-pruefpunkt, #442674);
 }
+
+/*
+ * Dark mode: the light-mode formula above mixes toward literal `white`,
+ * which is theme-independent. Dark-mode brand colors are deliberately
+ * lightened for legibility on a near-black page, so mixed with `white` at
+ * 15% they lose too much contrast against their own text color (as low as
+ * ~2:1 for some variant/brand pairings, against a 4.5:1 requirement).
+ *
+ * Each variant below uses whichever tint direction and percentage clears
+ * 4.5:1 for both Volksverpetzer and Mimikama's dark palettes (verified with
+ * the WCAG contrast formula) — primary and accent read fine tinted toward
+ * white, error and pruefpunkt need black instead.
+ */
+.dark .vvp-ui-badge--primary {
+  background: color-mix(in srgb, var(--vvp-primary, #1b7194) 5%, white);
+}
+
+.dark .vvp-ui-badge--accent {
+  background: #fff;
+}
+
+.dark .vvp-ui-badge--error {
+  background: color-mix(in srgb, var(--vvp-error, #ef5350) 15%, black);
+}
+
+.dark .vvp-ui-badge--pruefpunkt {
+  background: color-mix(in srgb, var(--vvp-pruefpunkt, #8b5cf6) 10%, black);
+}

package/dist/Button.css

@@ -56,8 +56,8 @@
 
 .vvp-ui-btn--ghost {
   background: transparent;
-  color: var(--vvp-primary, #1b7194);
-  border: 2px solid var(--vvp-primary, #1b7194);
+  color: var(--vvp-link-text, #1b7194);
+  border: 2px solid var(--vvp-link-text, #1b7194);
 }
 
 .vvp-ui-btn--ghost:hover:not(:disabled) {

package/dist/LinkButton.css

@@ -13,7 +13,7 @@
 .vvp-ui-linkbtn {
   border-radius: var(--vvp-radius-md, 12px);
   background: transparent;
-  color: var(--vvp-primary, #1b7194);
+  color: var(--vvp-link-text, #1b7194);
   border: 1.5px solid var(--vvp-surface, #e2f0f5);
   box-shadow: var(
     --vvp-elevation-accent-rest,

package/dist/ThemeToggle.css

@@ -3,4 +3,13 @@
   top: var(--vvp-spacing-lg, 16px);
   right: var(--vvp-spacing-lg, 16px);
   z-index: 50;
+  /* Ghost buttons default to a transparent background, which disappears
+     against busy page backgrounds (e.g. crowdfunding.volksverpetzer.de).
+     The toggle floats over arbitrary host content, so it needs an
+     explicit, opaque background rather than inheriting the ghost variant's. */
+  background: var(--vvp-background, #fff);
+}
+
+.vvp-ui-theme-toggle:hover:not(:disabled) {
+  background: var(--vvp-surface, #e2f0f5);
 }

package/dist/ToolPage.css

@@ -19,6 +19,25 @@
   -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
 }
 
+/*
+ * Unlike __background, this sits in normal document flow (not absolutely
+ * positioned, full opacity) — a real banner image pushes the rest of the
+ * page down instead of sitting faintly behind it.
+ */
+.vvp-ui-tool-page__header-image {
+  position: relative;
+  z-index: 0;
+  width: 100%;
+  overflow: hidden;
+  line-height: 0;
+}
+
+.vvp-ui-tool-page__header-image img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
 .vvp-ui-tool-page__background svg {
   width: 100%;
   height: 100%;
@@ -60,6 +79,18 @@
   gap: var(--vvp-spacing-xl, 20px);
 }
 
+/*
+ * Below ~640px the centered title runs the full viewport width and can
+ * reach right up under the fixed topbar (its ~16px offset + button height
+ * already eats into the default 40px top padding on its own). Push content
+ * down far enough to clear it instead of just the topbar's top offset.
+ */
+@media (max-width: 640px) {
+  .vvp-ui-tool-page__inner {
+    padding-top: calc(var(--vvp-spacing-huge, 40px) * 2);
+  }
+}
+
 /* Matches ai.volksverpetzer.de's pre-results state: the header/content/
    tags/help block sits in the vertical middle of the viewport rather than
    pinned to the top. */
@@ -91,7 +122,7 @@
 .vvp-ui-tool-page__icon {
   display: inline-flex;
   align-items: center;
-  color: var(--vvp-primary, #1b7194);
+  color: var(--vvp-link-text, #1b7194);
 }
 
 .vvp-ui-tool-page__tags {

package/dist/ToolPage.d.ts

@@ -18,6 +18,14 @@ export interface ToolPageProps extends Omit<HTMLAttributes<HTMLDivElement>, "tit
     githubUrl?: string;
     /** @default true */
     background?: boolean;
+    /**
+     * Full-width header image (e.g. a campaign banner), rendered above the
+     * title/content in normal document flow instead of the decorative
+     * jagged background shape — pass whatever `<img>`/`<Image>` element
+     * fits the consuming framework. Takes precedence over `background`
+     * when set (mutually exclusive, not layered).
+     */
+    headerImage?: ReactNode;
     /**
      * Vertically centers the icon/title/tags/content/helpText block in the
      * middle of the viewport — the pre-results look on ai.volksverpetzer.de.
@@ -34,6 +42,8 @@ export interface ToolPageProps extends Omit<HTMLAttributes<HTMLDivElement>, "tit
  * and this app's audio converter list. Centered icon/title/tags header,
  * full-width content slot, optional help text below it, a fixed top-right
  * corner with `ThemeToggle` and an optional GitHub link, and (by default)
- * a decorative jagged brand-blue shape along the top edge.
+ * a decorative jagged brand-blue shape along the top edge — or a full-width
+ * `headerImage` in its place for pages with a real banner (e.g. a campaign
+ * photo) instead of the abstract shape.
  */
-export declare function ToolPage({ icon, title, tags, children, helpText, githubUrl, background, centered, className, ...rest }: ToolPageProps): import("react").JSX.Element;
+export declare function ToolPage({ icon, title, tags, children, helpText, githubUrl, background, headerImage, centered, className, ...rest }: ToolPageProps): import("react").JSX.Element;

package/dist/ToolPage.js

@@ -9,9 +9,11 @@ const GithubIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", wid
  * and this app's audio converter list. Centered icon/title/tags header,
  * full-width content slot, optional help text below it, a fixed top-right
  * corner with `ThemeToggle` and an optional GitHub link, and (by default)
- * a decorative jagged brand-blue shape along the top edge.
+ * a decorative jagged brand-blue shape along the top edge — or a full-width
+ * `headerImage` in its place for pages with a real banner (e.g. a campaign
+ * photo) instead of the abstract shape.
  */
-export function ToolPage({ icon, title, tags, children, helpText, githubUrl, background = true, centered = false, className, ...rest }) {
+export function ToolPage({ icon, title, tags, children, helpText, githubUrl, background = true, headerImage, centered = false, className, ...rest }) {
     const classes = ["vvp-ui-tool-page", className].filter(Boolean).join(" ");
     const innerClasses = [
         "vvp-ui-tool-page__inner",
@@ -19,5 +21,5 @@ export function ToolPage({ icon, title, tags, children, helpText, githubUrl, bac
     ]
         .filter(Boolean)
         .join(" ");
-    return (_jsxs("div", { className: classes, ...rest, children: [background ? (_jsx("div", { className: "vvp-ui-tool-page__background", "aria-hidden": "true", children: _jsx("svg", { viewBox: "0 0 1440 320", preserveAspectRatio: "none", fill: "var(--vvp-primary, #1b7194)", children: _jsx("path", { d: "M0,0 L0,140 L75,70 L155,160 L235,50 L310,170 L390,80 L465,175 L545,60 L620,150 L700,40 L775,165 L855,75 L935,175 L1010,55 L1090,145 L1165,65 L1245,165 L1320,85 L1440,130 L1440,0 Z" }) }) })) : null, _jsxs("div", { className: "vvp-ui-tool-page__topbar", children: [githubUrl ? (_jsx("a", { href: githubUrl, target: "_blank", rel: "noopener noreferrer", "aria-label": "GitHub", className: "vvp-ui-btn vvp-ui-btn--ghost vvp-ui-btn--sm vvp-ui-tool-page__icon-link", children: _jsx(GithubIcon, {}) })) : null, _jsx(ThemeToggle, {})] }), _jsxs("div", { className: innerClasses, children: [_jsxs("div", { className: "vvp-ui-tool-page__header", children: [_jsxs("h1", { className: "vvp-ui-tool-page__title", children: [icon ? (_jsx("span", { className: "vvp-ui-tool-page__icon", "aria-hidden": "true", children: icon })) : null, title] }), tags && tags.length > 0 ? (_jsx("div", { className: "vvp-ui-tool-page__tags", children: tags.map((tag, index) => (_jsx(Badge, { variant: tag.variant ?? "neutral", size: "sm", children: tag.label }, index))) })) : null] }), _jsx("div", { className: "vvp-ui-tool-page__content", children: children }), helpText ? _jsx("p", { className: "vvp-ui-tool-page__help", children: helpText }) : null] })] }));
+    return (_jsxs("div", { className: classes, ...rest, children: [headerImage ? (_jsx("div", { className: "vvp-ui-tool-page__header-image", children: headerImage })) : background ? (_jsx("div", { className: "vvp-ui-tool-page__background", "aria-hidden": "true", children: _jsx("svg", { viewBox: "0 0 1440 320", preserveAspectRatio: "none", fill: "var(--vvp-primary, #1b7194)", children: _jsx("path", { d: "M0,0 L0,140 L75,70 L155,160 L235,50 L310,170 L390,80 L465,175 L545,60 L620,150 L700,40 L775,165 L855,75 L935,175 L1010,55 L1090,145 L1165,65 L1245,165 L1320,85 L1440,130 L1440,0 Z" }) }) })) : null, _jsxs("div", { className: "vvp-ui-tool-page__topbar", children: [githubUrl ? (_jsx("a", { href: githubUrl, target: "_blank", rel: "noopener noreferrer", "aria-label": "GitHub", className: "vvp-ui-btn vvp-ui-btn--ghost vvp-ui-btn--sm vvp-ui-tool-page__icon-link", children: _jsx(GithubIcon, {}) })) : null, _jsx(ThemeToggle, {})] }), _jsxs("div", { className: innerClasses, children: [_jsxs("div", { className: "vvp-ui-tool-page__header", children: [_jsxs("h1", { className: "vvp-ui-tool-page__title", children: [icon ? (_jsx("span", { className: "vvp-ui-tool-page__icon", "aria-hidden": "true", children: icon })) : null, title] }), tags && tags.length > 0 ? (_jsx("div", { className: "vvp-ui-tool-page__tags", children: tags.map((tag, index) => (_jsx(Badge, { variant: tag.variant ?? "neutral", size: "sm", children: tag.label }, index))) })) : null] }), _jsx("div", { className: "vvp-ui-tool-page__content", children: children }), helpText ? _jsx("p", { className: "vvp-ui-tool-page__help", children: helpText }) : null] })] }));
 }

package/dist/styles.css

@@ -74,6 +74,34 @@
   color: var(--vvp-pruefpunkt, #442674);
 }
 
+/*
+ * Dark mode: the light-mode formula above mixes toward literal `white`,
+ * which is theme-independent. Dark-mode brand colors are deliberately
+ * lightened for legibility on a near-black page, so mixed with `white` at
+ * 15% they lose too much contrast against their own text color (as low as
+ * ~2:1 for some variant/brand pairings, against a 4.5:1 requirement).
+ *
+ * Each variant below uses whichever tint direction and percentage clears
+ * 4.5:1 for both Volksverpetzer and Mimikama's dark palettes (verified with
+ * the WCAG contrast formula) — primary and accent read fine tinted toward
+ * white, error and pruefpunkt need black instead.
+ */
+.dark .vvp-ui-badge--primary {
+  background: color-mix(in srgb, var(--vvp-primary, #1b7194) 5%, white);
+}
+
+.dark .vvp-ui-badge--accent {
+  background: #fff;
+}
+
+.dark .vvp-ui-badge--error {
+  background: color-mix(in srgb, var(--vvp-error, #ef5350) 15%, black);
+}
+
+.dark .vvp-ui-badge--pruefpunkt {
+  background: color-mix(in srgb, var(--vvp-pruefpunkt, #8b5cf6) 10%, black);
+}
+
 .vvp-ui-btn {
   display: inline-flex;
   align-items: center;
@@ -132,8 +160,8 @@
 
 .vvp-ui-btn--ghost {
   background: transparent;
-  color: var(--vvp-primary, #1b7194);
-  border: 2px solid var(--vvp-primary, #1b7194);
+  color: var(--vvp-link-text, #1b7194);
+  border: 2px solid var(--vvp-link-text, #1b7194);
 }
 
 .vvp-ui-btn--ghost:hover:not(:disabled) {
@@ -258,7 +286,7 @@
 .vvp-ui-linkbtn {
   border-radius: var(--vvp-radius-md, 12px);
   background: transparent;
-  color: var(--vvp-primary, #1b7194);
+  color: var(--vvp-link-text, #1b7194);
   border: 1.5px solid var(--vvp-surface, #e2f0f5);
   box-shadow: var(
     --vvp-elevation-accent-rest,
@@ -430,6 +458,15 @@
   top: var(--vvp-spacing-lg, 16px);
   right: var(--vvp-spacing-lg, 16px);
   z-index: 50;
+  /* Ghost buttons default to a transparent background, which disappears
+     against busy page backgrounds (e.g. crowdfunding.volksverpetzer.de).
+     The toggle floats over arbitrary host content, so it needs an
+     explicit, opaque background rather than inheriting the ghost variant's. */
+  background: var(--vvp-background, #fff);
+}
+
+.vvp-ui-theme-toggle:hover:not(:disabled) {
+  background: var(--vvp-surface, #e2f0f5);
 }
 
 .vvp-ui-tool-page {
@@ -453,6 +490,25 @@
   -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
 }
 
+/*
+ * Unlike __background, this sits in normal document flow (not absolutely
+ * positioned, full opacity) — a real banner image pushes the rest of the
+ * page down instead of sitting faintly behind it.
+ */
+.vvp-ui-tool-page__header-image {
+  position: relative;
+  z-index: 0;
+  width: 100%;
+  overflow: hidden;
+  line-height: 0;
+}
+
+.vvp-ui-tool-page__header-image img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
 .vvp-ui-tool-page__background svg {
   width: 100%;
   height: 100%;
@@ -494,6 +550,18 @@
   gap: var(--vvp-spacing-xl, 20px);
 }
 
+/*
+ * Below ~640px the centered title runs the full viewport width and can
+ * reach right up under the fixed topbar (its ~16px offset + button height
+ * already eats into the default 40px top padding on its own). Push content
+ * down far enough to clear it instead of just the topbar's top offset.
+ */
+@media (max-width: 640px) {
+  .vvp-ui-tool-page__inner {
+    padding-top: calc(var(--vvp-spacing-huge, 40px) * 2);
+  }
+}
+
 /* Matches ai.volksverpetzer.de's pre-results state: the header/content/
    tags/help block sits in the vertical middle of the viewport rather than
    pinned to the top. */
@@ -525,7 +593,7 @@
 .vvp-ui-tool-page__icon {
   display: inline-flex;
   align-items: center;
-  color: var(--vvp-primary, #1b7194);
+  color: var(--vvp-link-text, #1b7194);
 }
 
 .vvp-ui-tool-page__tags {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volksverpetzer/ui-web",
-  "version": "0.11.0",
+  "version": "0.12.1",
   "description": "Shared brand-visible React components (Button, Badge, Card, ProgressBar, Input, Alert, Slider, ThemeToggle, InputButton) for vvp_link_shortener, vvp_divi5_extensions, crowdfunding, and vectorcrawl. Plain, hand-scoped CSS (vvp-ui-* class prefix) consuming the --vvp-* custom properties emitted by @volksverpetzer/design-tokens — no Tailwind classes, so it drops into a Tailwind app and Divi's WordPress-embedded CSS alike.",
   "type": "module",
   "license": "MIT",