@volksverpetzer/ui-web 0.12.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

@@ -122,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/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 {
@@ -556,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.12.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",