@volksverpetzer/ui-web 0.4.0 → 0.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Volksverpetzer
+
+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/dist/Badge.css

@@ -1,21 +1,40 @@
 .vvp-ui-badge {
   display: inline-flex;
   align-items: center;
+  gap: var(--vvp-spacing-xs, 4px);
   border-radius: var(--vvp-radius-full, 9999px);
   padding: var(--vvp-spacing-xs, 4px) var(--vvp-spacing-sm, 8px);
   font-size: var(--vvp-font-size-xs, 12px);
-  font-weight: 700;
-  line-height: 1.2;
+  font-weight: 600;
+  line-height: 1.4;
+  white-space: nowrap;
 }
 
+.vvp-ui-badge__icon {
+  display: inline-flex;
+  width: 0.8em;
+  height: 0.8em;
+}
+
+.vvp-ui-badge__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+/*
+ * Soft/tinted style: a light tint of the variant color as background, the
+ * variant color itself as text — reads as a label, not a button. Tints are
+ * derived with color-mix() rather than separate "light" tokens, so they
+ * stay in sync with the source color automatically.
+ */
 .vvp-ui-badge--primary {
-  background: var(--vvp-primary, #1b7194);
-  color: var(--vvp-on-primary, #fff);
+  background: color-mix(in srgb, var(--vvp-primary, #1b7194) 15%, white);
+  color: var(--vvp-primary, #1b7194);
 }
 
 .vvp-ui-badge--accent {
-  background: var(--vvp-accent, #db2685);
-  color: var(--vvp-on-primary, #fff);
+  background: color-mix(in srgb, var(--vvp-accent, #db2685) 15%, white);
+  color: var(--vvp-accent, #db2685);
 }
 
 .vvp-ui-badge--neutral {
@@ -24,6 +43,11 @@
 }
 
 .vvp-ui-badge--error {
-  background: var(--vvp-error, #c62828);
-  color: var(--vvp-on-error, #fff);
+  background: color-mix(in srgb, var(--vvp-error, #c62828) 15%, white);
+  color: var(--vvp-error, #c62828);
+}
+
+.vvp-ui-badge--pruefpunkt {
+  background: color-mix(in srgb, var(--vvp-pruefpunkt, #442674) 15%, white);
+  color: var(--vvp-pruefpunkt, #442674);
 }

package/dist/Badge.d.ts

@@ -1,9 +1,16 @@
 import type { HTMLAttributes, ReactNode } from "react";
 import "./Badge.css";
-export type BadgeVariant = "primary" | "accent" | "neutral" | "error";
+export type BadgeVariant = "primary" | "accent" | "neutral" | "error" | "pruefpunkt";
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     variant?: BadgeVariant;
+    /** Rendered before the label — an SVG icon, sized to match the text. */
+    icon?: ReactNode;
     children: ReactNode;
 }
-/** Small pill label — category tags, status markers, counts. */
-export declare function Badge({ variant, className, children, ...rest }: BadgeProps): import("react").JSX.Element;
+/**
+ * Small pill label — category tags, status markers, counts. Soft/tinted
+ * style (a light tint of the variant color as background, the variant
+ * color itself as text) rather than a solid fill, so it reads as a label
+ * rather than a button.
+ */
+export declare function Badge({ variant, icon, className, children, ...rest }: BadgeProps): import("react").JSX.Element;

package/dist/Badge.js

@@ -1,9 +1,14 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "./Badge.css";
-/** Small pill label — category tags, status markers, counts. */
-export function Badge({ variant = "neutral", className, children, ...rest }) {
+/**
+ * Small pill label — category tags, status markers, counts. Soft/tinted
+ * style (a light tint of the variant color as background, the variant
+ * color itself as text) rather than a solid fill, so it reads as a label
+ * rather than a button.
+ */
+export function Badge({ variant = "neutral", icon, className, children, ...rest }) {
     const classes = ["vvp-ui-badge", `vvp-ui-badge--${variant}`, className]
         .filter(Boolean)
         .join(" ");
-    return (_jsx("span", { className: classes, ...rest, children: children }));
+    return (_jsxs("span", { className: classes, ...rest, children: [icon ? (_jsx("span", { className: "vvp-ui-badge__icon", "aria-hidden": "true", children: icon })) : null, children] }));
 }

package/dist/styles.css

@@ -1,21 +1,40 @@
 .vvp-ui-badge {
   display: inline-flex;
   align-items: center;
+  gap: var(--vvp-spacing-xs, 4px);
   border-radius: var(--vvp-radius-full, 9999px);
   padding: var(--vvp-spacing-xs, 4px) var(--vvp-spacing-sm, 8px);
   font-size: var(--vvp-font-size-xs, 12px);
-  font-weight: 700;
-  line-height: 1.2;
+  font-weight: 600;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+.vvp-ui-badge__icon {
+  display: inline-flex;
+  width: 0.8em;
+  height: 0.8em;
+}
+
+.vvp-ui-badge__icon svg {
+  width: 100%;
+  height: 100%;
 }
 
+/*
+ * Soft/tinted style: a light tint of the variant color as background, the
+ * variant color itself as text — reads as a label, not a button. Tints are
+ * derived with color-mix() rather than separate "light" tokens, so they
+ * stay in sync with the source color automatically.
+ */
 .vvp-ui-badge--primary {
-  background: var(--vvp-primary, #1b7194);
-  color: var(--vvp-on-primary, #fff);
+  background: color-mix(in srgb, var(--vvp-primary, #1b7194) 15%, white);
+  color: var(--vvp-primary, #1b7194);
 }
 
 .vvp-ui-badge--accent {
-  background: var(--vvp-accent, #db2685);
-  color: var(--vvp-on-primary, #fff);
+  background: color-mix(in srgb, var(--vvp-accent, #db2685) 15%, white);
+  color: var(--vvp-accent, #db2685);
 }
 
 .vvp-ui-badge--neutral {
@@ -24,8 +43,13 @@
 }
 
 .vvp-ui-badge--error {
-  background: var(--vvp-error, #c62828);
-  color: var(--vvp-on-error, #fff);
+  background: color-mix(in srgb, var(--vvp-error, #c62828) 15%, white);
+  color: var(--vvp-error, #c62828);
+}
+
+.vvp-ui-badge--pruefpunkt {
+  background: color-mix(in srgb, var(--vvp-pruefpunkt, #442674) 15%, white);
+  color: var(--vvp-pruefpunkt, #442674);
 }
 
 .vvp-ui-btn {

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@volksverpetzer/ui-web",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Shared brand-visible React components (Button, Badge, Card) for vvp_link_shortener, vvp_divi5_extensions, and crowdfunding. 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",
   "repository": {
     "type": "git",
     "url": "https://github.com/Volksverpetzer/vvp_design_system.git",
@@ -28,7 +29,7 @@
   "devDependencies": {
     "@types/react": "^19.2.18",
     "react": "^19.2.3",
-    "typescript": "^5.9.3"
+    "typescript": "^6.0.3"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json && node scripts/bundle-css.mjs",