@nyaruka/temba-components 0.158.3 → 0.159.0

package/src/styles/designTokens.ts

@@ -16,8 +16,10 @@ export const designTokens = css`
     /* accent ramp — the primary color sits at 400 and the ramp is
        derived from it in both directions via sRGB mixing.
        The anchor reads from --primary-rgb so host pages can re-theme
-       the entire ramp by setting e.g. --primary-rgb: 112, 0, 132. */
-    --accent: rgb(var(--primary-rgb, 98, 147, 201));
+       the entire ramp by setting e.g. --primary-rgb: 112, 0, 132.
+       Fallback matches the design-system.css default so component-
+       only test harnesses pick up the same brand colour. */
+    --accent: rgb(var(--primary-rgb, 73, 127, 206));
     --accent-50: color-mix(in srgb, var(--accent) 6%, white);
     --accent-100: color-mix(in srgb, var(--accent) 16%, white);
     --accent-200: color-mix(in srgb, var(--accent) 32%, white);
@@ -68,6 +70,7 @@ export const designTokens = css`
     --flow: #16a34a;
     --channel: #6b21a8;
     --topic: #d97706;
+    --campaign: #0891b2;
     /* Field stays slightly darker than the bright yellow-500 anchor
        used for flow/channel — yellow-500 has too little contrast
        against white to read as a foreground / icon hue on its own.

package/src/styles/pillVariants.ts

@@ -42,7 +42,8 @@ export const PILL_TYPES: ReadonlySet<string> = new Set([
   'label',
   'keyword',
   'channel',
-  'topic'
+  'topic',
+  'campaign'
 ]);
 
 /** Default icon name for each pill variant. Used when a consumer
@@ -55,7 +56,8 @@ export const PILL_TYPE_ICONS: Readonly<Record<string, string>> = {
   field: 'fields',
   flow: 'flow',
   label: 'label',
-  topic: 'topic'
+  topic: 'topic',
+  campaign: 'campaign'
 };
 
 /** Inverse mapping: icon name (alias or resolved SVG id) → pill type.
@@ -68,11 +70,13 @@ const ICON_TO_PILL_TYPE: Readonly<Record<string, string>> = {
   field: 'field',
   fields: 'field',
   label: 'label',
+  campaign: 'campaign',
   // resolved Icon enum SVG ids
   'users-01': 'group',
   'atom-01': 'group',
   'user-01': 'contact',
-  'tag-01': 'label'
+  'tag-01': 'label',
+  'clock-refresh': 'campaign'
 };
 
 export const iconToPillType = (icon?: string): string | undefined => {
@@ -84,10 +88,15 @@ export const iconToPillType = (icon?: string): string | undefined => {
 };
 
 export const pillVariants = css`
+  /* The grey variants border off --pill-border, falling back to
+     --border. The indirection lets a host context (e.g. a selected
+     list row) retint the border without redefining --border, which
+     each component re-declares in its own shadow DOM via the design
+     tokens and so can't be overridden from outside. */
   .pill-neutral {
     background: var(--sunken);
     color: var(--text-1);
-    border-color: var(--border);
+    border-color: var(--pill-border, var(--border));
     --icon-color: var(--text-2);
   }
   .pill-flow {
@@ -118,6 +127,12 @@ export const pillVariants = css`
     border-color: color-mix(in srgb, var(--topic) 25%, white);
     --icon-color: var(--topic);
   }
+  .pill-campaign {
+    background: color-mix(in srgb, var(--campaign) 12%, white);
+    color: var(--campaign);
+    border-color: color-mix(in srgb, var(--campaign) 25%, white);
+    --icon-color: var(--campaign);
+  }
   .pill-field {
     /* Yellow has very low contrast against white, so the color-mix
        approach used by other variants washes out at any readable mix
@@ -133,7 +148,7 @@ export const pillVariants = css`
   .pill-keyword {
     background: var(--sunken);
     color: var(--text-1);
-    border-color: var(--border);
+    border-color: var(--pill-border, var(--border));
     --icon-color: var(--text-2);
     font-family: var(--font-mono);
     font-size: 11.5px;
@@ -141,7 +156,7 @@ export const pillVariants = css`
   .pill-label {
     background: var(--sunken);
     color: var(--text-2);
-    border-color: var(--border);
+    border-color: var(--pill-border, var(--border));
     --icon-color: var(--text-2);
   }
 `;