@volksverpetzer/ui-web 0.4.1 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/Badge.css +39 -8
  2. package/dist/Badge.d.ts +13 -3
  3. package/dist/Badge.js +15 -5
  4. package/dist/styles.css +39 -8
  5. package/package.json +2 -2
package/dist/Badge.css CHANGED
@@ -1,21 +1,47 @@
1
1
  .vvp-ui-badge {
2
2
  display: inline-flex;
3
3
  align-items: center;
4
+ gap: var(--vvp-spacing-xs, 4px);
4
5
  border-radius: var(--vvp-radius-full, 9999px);
5
6
  padding: var(--vvp-spacing-xs, 4px) var(--vvp-spacing-sm, 8px);
7
+ font-weight: 600;
8
+ line-height: 1.4;
9
+ white-space: nowrap;
10
+ }
11
+
12
+ .vvp-ui-badge--size-sm {
6
13
  font-size: var(--vvp-font-size-xs, 12px);
7
- font-weight: 700;
8
- line-height: 1.2;
9
14
  }
10
15
 
16
+ .vvp-ui-badge--size-md {
17
+ font-size: var(--vvp-font-size-base, 16px);
18
+ }
19
+
20
+ .vvp-ui-badge__icon {
21
+ display: inline-flex;
22
+ width: 0.8em;
23
+ height: 0.8em;
24
+ }
25
+
26
+ .vvp-ui-badge__icon svg {
27
+ width: 100%;
28
+ height: 100%;
29
+ }
30
+
31
+ /*
32
+ * Soft/tinted style: a light tint of the variant color as background, the
33
+ * variant color itself as text — reads as a label, not a button. Tints are
34
+ * derived with color-mix() rather than separate "light" tokens, so they
35
+ * stay in sync with the source color automatically.
36
+ */
11
37
  .vvp-ui-badge--primary {
12
- background: var(--vvp-primary, #1b7194);
13
- color: var(--vvp-on-primary, #fff);
38
+ background: color-mix(in srgb, var(--vvp-primary, #1b7194) 15%, white);
39
+ color: var(--vvp-primary, #1b7194);
14
40
  }
15
41
 
16
42
  .vvp-ui-badge--accent {
17
- background: var(--vvp-accent, #db2685);
18
- color: var(--vvp-on-primary, #fff);
43
+ background: color-mix(in srgb, var(--vvp-accent, #db2685) 15%, white);
44
+ color: var(--vvp-accent, #db2685);
19
45
  }
20
46
 
21
47
  .vvp-ui-badge--neutral {
@@ -24,6 +50,11 @@
24
50
  }
25
51
 
26
52
  .vvp-ui-badge--error {
27
- background: var(--vvp-error, #c62828);
28
- color: var(--vvp-on-error, #fff);
53
+ background: color-mix(in srgb, var(--vvp-error, #c62828) 15%, white);
54
+ color: var(--vvp-error, #c62828);
55
+ }
56
+
57
+ .vvp-ui-badge--pruefpunkt {
58
+ background: color-mix(in srgb, var(--vvp-pruefpunkt, #442674) 15%, white);
59
+ color: var(--vvp-pruefpunkt, #442674);
29
60
  }
package/dist/Badge.d.ts CHANGED
@@ -1,9 +1,19 @@
1
1
  import type { HTMLAttributes, ReactNode } from "react";
2
2
  import "./Badge.css";
3
- export type BadgeVariant = "primary" | "accent" | "neutral" | "error";
3
+ export type BadgeVariant = "primary" | "accent" | "neutral" | "error" | "pruefpunkt";
4
+ export type BadgeSize = "sm" | "md";
4
5
  export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
5
6
  variant?: BadgeVariant;
7
+ /** @default "md" */
8
+ size?: BadgeSize;
9
+ /** Rendered before the label — an SVG icon, sized to match the text. */
10
+ icon?: ReactNode;
6
11
  children: ReactNode;
7
12
  }
8
- /** Small pill label — category tags, status markers, counts. */
9
- export declare function Badge({ variant, className, children, ...rest }: BadgeProps): import("react").JSX.Element;
13
+ /**
14
+ * Small pill label — category tags, status markers, counts. Soft/tinted
15
+ * style (a light tint of the variant color as background, the variant
16
+ * color itself as text) rather than a solid fill, so it reads as a label
17
+ * rather than a button.
18
+ */
19
+ export declare function Badge({ variant, size, icon, className, children, ...rest }: BadgeProps): import("react").JSX.Element;
package/dist/Badge.js CHANGED
@@ -1,9 +1,19 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import "./Badge.css";
3
- /** Small pill label — category tags, status markers, counts. */
4
- export function Badge({ variant = "neutral", className, children, ...rest }) {
5
- const classes = ["vvp-ui-badge", `vvp-ui-badge--${variant}`, className]
3
+ /**
4
+ * Small pill label — category tags, status markers, counts. Soft/tinted
5
+ * style (a light tint of the variant color as background, the variant
6
+ * color itself as text) rather than a solid fill, so it reads as a label
7
+ * rather than a button.
8
+ */
9
+ export function Badge({ variant = "neutral", size = "md", icon, className, children, ...rest }) {
10
+ const classes = [
11
+ "vvp-ui-badge",
12
+ `vvp-ui-badge--${variant}`,
13
+ `vvp-ui-badge--size-${size}`,
14
+ className,
15
+ ]
6
16
  .filter(Boolean)
7
17
  .join(" ");
8
- return (_jsx("span", { className: classes, ...rest, children: children }));
18
+ return (_jsxs("span", { className: classes, ...rest, children: [icon ? (_jsx("span", { className: "vvp-ui-badge__icon", "aria-hidden": "true", children: icon })) : null, children] }));
9
19
  }
package/dist/styles.css CHANGED
@@ -1,21 +1,47 @@
1
1
  .vvp-ui-badge {
2
2
  display: inline-flex;
3
3
  align-items: center;
4
+ gap: var(--vvp-spacing-xs, 4px);
4
5
  border-radius: var(--vvp-radius-full, 9999px);
5
6
  padding: var(--vvp-spacing-xs, 4px) var(--vvp-spacing-sm, 8px);
7
+ font-weight: 600;
8
+ line-height: 1.4;
9
+ white-space: nowrap;
10
+ }
11
+
12
+ .vvp-ui-badge--size-sm {
6
13
  font-size: var(--vvp-font-size-xs, 12px);
7
- font-weight: 700;
8
- line-height: 1.2;
9
14
  }
10
15
 
16
+ .vvp-ui-badge--size-md {
17
+ font-size: var(--vvp-font-size-base, 16px);
18
+ }
19
+
20
+ .vvp-ui-badge__icon {
21
+ display: inline-flex;
22
+ width: 0.8em;
23
+ height: 0.8em;
24
+ }
25
+
26
+ .vvp-ui-badge__icon svg {
27
+ width: 100%;
28
+ height: 100%;
29
+ }
30
+
31
+ /*
32
+ * Soft/tinted style: a light tint of the variant color as background, the
33
+ * variant color itself as text — reads as a label, not a button. Tints are
34
+ * derived with color-mix() rather than separate "light" tokens, so they
35
+ * stay in sync with the source color automatically.
36
+ */
11
37
  .vvp-ui-badge--primary {
12
- background: var(--vvp-primary, #1b7194);
13
- color: var(--vvp-on-primary, #fff);
38
+ background: color-mix(in srgb, var(--vvp-primary, #1b7194) 15%, white);
39
+ color: var(--vvp-primary, #1b7194);
14
40
  }
15
41
 
16
42
  .vvp-ui-badge--accent {
17
- background: var(--vvp-accent, #db2685);
18
- color: var(--vvp-on-primary, #fff);
43
+ background: color-mix(in srgb, var(--vvp-accent, #db2685) 15%, white);
44
+ color: var(--vvp-accent, #db2685);
19
45
  }
20
46
 
21
47
  .vvp-ui-badge--neutral {
@@ -24,8 +50,13 @@
24
50
  }
25
51
 
26
52
  .vvp-ui-badge--error {
27
- background: var(--vvp-error, #c62828);
28
- color: var(--vvp-on-error, #fff);
53
+ background: color-mix(in srgb, var(--vvp-error, #c62828) 15%, white);
54
+ color: var(--vvp-error, #c62828);
55
+ }
56
+
57
+ .vvp-ui-badge--pruefpunkt {
58
+ background: color-mix(in srgb, var(--vvp-pruefpunkt, #442674) 15%, white);
59
+ color: var(--vvp-pruefpunkt, #442674);
29
60
  }
30
61
 
31
62
  .vvp-ui-btn {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@volksverpetzer/ui-web",
3
- "version": "0.4.1",
3
+ "version": "0.6.0",
4
4
  "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.",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -29,7 +29,7 @@
29
29
  "devDependencies": {
30
30
  "@types/react": "^19.2.18",
31
31
  "react": "^19.2.3",
32
- "typescript": "^5.9.3"
32
+ "typescript": "^6.0.3"
33
33
  },
34
34
  "scripts": {
35
35
  "build": "tsc -p tsconfig.json && node scripts/bundle-css.mjs",