@mediaradar/design-components 0.12.0 → 0.13.0

package/dist/index.d.cts

@@ -151,7 +151,7 @@ declare function AdvertiserSearchPrompt({ label }: AdvertiserSearchPromptProps):
  * colour do I want" -- a caller reaching for `danger` because red looks good
  * is the start of the drift this component replaces.
  */
-type BadgeTone = "neutral" | "brand" | "success" | "warning" | "danger" | "ai" | "overlay";
+type BadgeTone = "neutral" | "brand" | "brandSolid" | "success" | "warning" | "danger" | "ai" | "overlay";
 /**
  * Shape and case. Orthogonal to tone: any tone can be any kind, which is what
  * keeps this two small props instead of one list of every combination the
@@ -174,10 +174,10 @@ interface BadgeProps {
  * props -- `tone` (what kind of thing) and `kind` (shape and case) -- which
  * between them cover every badge treatment in the product.
  * @props
- * tone?: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'ai' | 'overlay' (default 'neutral')
+ * tone?: 'neutral' | 'brand' | 'brandSolid' | 'success' | 'warning' | 'danger' | 'ai' | 'overlay' (default 'neutral')
  * kind?: 'label' | 'count' | 'eyebrow' (default 'label')
  * children: ReactNode
- * @tokens text-micro, rounded-full, bg-subtle, bg-brand-primarySoft,
+ * @tokens text-micro, rounded-full, bg-subtle, bg-brand-primarySoft, bg-brand-primaryAction,
  * bg-status-success/15, bg-status-warning/30, bg-status-danger/15, bg-scrim,
  * text-text-secondary, text-brand-primaryAction, text-text-success,
  * text-text-warning, text-text-danger, text-ai-ontint, text-brand-onprimary,
@@ -189,6 +189,7 @@ interface BadgeProps {
  * that competes with the content it annotates has stopped being a badge.
  * @variant neutral - Default. A category, a count of something unremarkable, a quiet flag.
  * @variant brand - This item is special in a way the product cares about -- primary, selected, yours.
+ * @variant brandSolid - Full brand fill, for a count that has to be noticed: active filters, unread, selected.
  * @variant success - A finished or healthy state. Never just "green because it is good news".
  * @variant warning - Needs attention but is not broken. Partial data, an approaching limit.
  * @variant danger - Failed, expired, or over a hard limit. Not merely "important".
@@ -210,7 +211,7 @@ interface BadgeProps {
  * @usage
  * ```tsx
  * <Badge>Financial Services</Badge>
- * <Badge tone="brand" kind="count">{selected.length}</Badge>
+ * <Badge tone="brandSolid" kind="count">{activeFilters}</Badge>
  * <Badge tone="warning">Partial month</Badge>
  * <Badge kind="eyebrow" tone="neutral">Saved view</Badge>
  * <Badge tone="brand"><Check size={11} aria-hidden="true" />Primary</Badge>

package/dist/index.d.ts

@@ -151,7 +151,7 @@ declare function AdvertiserSearchPrompt({ label }: AdvertiserSearchPromptProps):
  * colour do I want" -- a caller reaching for `danger` because red looks good
  * is the start of the drift this component replaces.
  */
-type BadgeTone = "neutral" | "brand" | "success" | "warning" | "danger" | "ai" | "overlay";
+type BadgeTone = "neutral" | "brand" | "brandSolid" | "success" | "warning" | "danger" | "ai" | "overlay";
 /**
  * Shape and case. Orthogonal to tone: any tone can be any kind, which is what
  * keeps this two small props instead of one list of every combination the
@@ -174,10 +174,10 @@ interface BadgeProps {
  * props -- `tone` (what kind of thing) and `kind` (shape and case) -- which
  * between them cover every badge treatment in the product.
  * @props
- * tone?: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'ai' | 'overlay' (default 'neutral')
+ * tone?: 'neutral' | 'brand' | 'brandSolid' | 'success' | 'warning' | 'danger' | 'ai' | 'overlay' (default 'neutral')
  * kind?: 'label' | 'count' | 'eyebrow' (default 'label')
  * children: ReactNode
- * @tokens text-micro, rounded-full, bg-subtle, bg-brand-primarySoft,
+ * @tokens text-micro, rounded-full, bg-subtle, bg-brand-primarySoft, bg-brand-primaryAction,
  * bg-status-success/15, bg-status-warning/30, bg-status-danger/15, bg-scrim,
  * text-text-secondary, text-brand-primaryAction, text-text-success,
  * text-text-warning, text-text-danger, text-ai-ontint, text-brand-onprimary,
@@ -189,6 +189,7 @@ interface BadgeProps {
  * that competes with the content it annotates has stopped being a badge.
  * @variant neutral - Default. A category, a count of something unremarkable, a quiet flag.
  * @variant brand - This item is special in a way the product cares about -- primary, selected, yours.
+ * @variant brandSolid - Full brand fill, for a count that has to be noticed: active filters, unread, selected.
  * @variant success - A finished or healthy state. Never just "green because it is good news".
  * @variant warning - Needs attention but is not broken. Partial data, an approaching limit.
  * @variant danger - Failed, expired, or over a hard limit. Not merely "important".
@@ -210,7 +211,7 @@ interface BadgeProps {
  * @usage
  * ```tsx
  * <Badge>Financial Services</Badge>
- * <Badge tone="brand" kind="count">{selected.length}</Badge>
+ * <Badge tone="brandSolid" kind="count">{activeFilters}</Badge>
  * <Badge tone="warning">Partial month</Badge>
  * <Badge kind="eyebrow" tone="neutral">Saved view</Badge>
  * <Badge tone="brand"><Check size={11} aria-hidden="true" />Primary</Badge>

package/dist/index.js

@@ -407,6 +407,12 @@ import { jsx as jsx4 } from "react/jsx-runtime";
 var TONE = {
   neutral: "bg-subtle text-text-secondary",
   brand: "bg-brand-primarySoft text-brand-primaryAction",
+  // Solid, not a tint. A filter count's whole job is to be noticed -- it is
+  // what tells you the view you are looking at is filtered at all -- so it
+  // carries the full brand fill rather than the soft wash `brand` uses for a
+  // label like "Primary". Missed in the first pass, which collapsed both into
+  // one tone; the swap onto real call sites is what surfaced it.
+  brandSolid: "bg-brand-primaryAction text-brand-onprimary",
   success: "bg-status-success/15 text-text-success",
   // Heavier tint than success and danger on purpose. Equal opacity does not
   // give equal presence: the warning amber (#b8843a) sits far closer to the