@nyaruka/temba-components 0.169.0 → 0.170.1

package/src/styles/designTokens.ts

@@ -20,16 +20,21 @@ export const designTokens = css`
        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);
-    --accent-300: color-mix(in srgb, var(--accent) 60%, white);
+    /* Static ramp values are pre-mixed from the default anchor for
+       browsers without color-mix() (pre-Chrome 111, e.g. the last
+       Chrome available on Windows 7/8.1). The @supports block below
+       re-derives them from --accent so host re-theming still works
+       where color-mix() is available. */
+    --accent-50: #f4f7fc;
+    --accent-100: #e2ebf7;
+    --accent-200: #c5d6ef;
+    --accent-300: #92b2e2;
     --accent-400: var(--accent);
-    --accent-500: color-mix(in srgb, var(--accent) 90%, black);
-    --accent-600: color-mix(in srgb, var(--accent) 80%, black);
-    --accent-700: color-mix(in srgb, var(--accent) 65%, black);
-    --accent-800: color-mix(in srgb, var(--accent) 50%, black);
-    --accent-900: color-mix(in srgb, var(--accent) 35%, black);
+    --accent-500: #4272b9;
+    --accent-600: #3a66a5;
+    --accent-700: #2f5386;
+    --accent-800: #244067;
+    --accent-900: #1a2c48;
 
     /* neutrals */
     --bg: #f6f7f9;
@@ -124,14 +129,19 @@ export const designTokens = css`
        error state (e.g. the dropdown popup) reference --focus-muted
        / --focus-halo directly to skip that override. */
     --focus: rgb(var(--focus-rgb, 91, 156, 229));
-    --focus-50: color-mix(in srgb, var(--focus) 12%, white);
-    --focus-100: color-mix(in srgb, var(--focus) 24%, white);
-    --focus-200: color-mix(in srgb, var(--focus) 40%, white);
-    --focus-300: color-mix(in srgb, var(--focus) 60%, white);
-    --focus-600: color-mix(in srgb, var(--focus) 60%, black);
-    --focus-700: color-mix(in srgb, var(--focus) 45%, black);
-    --focus-muted: color-mix(in srgb, var(--focus) 60%, white);
-    --focus-halo: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent);
+    /* Static values pre-mixed from the default focus hue for browsers
+       without color-mix(); re-derived in the @supports block below. */
+    --focus-50: #ebf3fc;
+    --focus-100: #d8e7f9;
+    --focus-200: #bdd7f5;
+    --focus-300: #9dc4ef;
+    --focus-600: #375e89;
+    --focus-700: #294667;
+    --focus-muted: #9dc4ef;
+    /* The halo is a translucent wash, so unlike the opaque ramp steps
+       it can keep tracking the theme without color-mix() — rgba(var())
+       substitution works wherever custom properties do. */
+    --focus-halo: 0 0 0 3px rgba(var(--focus-rgb, 91, 156, 229), 0.3);
     --color-focus: var(--focus-muted);
     --widget-box-shadow-focused: var(--focus-halo);
 
@@ -160,4 +170,34 @@ export const designTokens = css`
     --temba-select-selected-font-size: 13.5px;
     --temba-select-min-height: var(--input-h);
   }
+
+  /* Where color-mix() is supported, derive the accent / focus ramps
+     from their anchors so host pages can re-theme by overriding just
+     --primary-rgb / --focus-rgb. Browsers without color-mix() keep the
+     static pre-mixed values above. Note the static values can't act as
+     per-declaration fallbacks — a custom property is never invalid at
+     parse time, so the last declaration always wins — hence the
+     @supports gate. */
+  @supports (color: color-mix(in srgb, red, red)) {
+    :host {
+      --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);
+      --accent-300: color-mix(in srgb, var(--accent) 60%, white);
+      --accent-500: color-mix(in srgb, var(--accent) 90%, black);
+      --accent-600: color-mix(in srgb, var(--accent) 80%, black);
+      --accent-700: color-mix(in srgb, var(--accent) 65%, black);
+      --accent-800: color-mix(in srgb, var(--accent) 50%, black);
+      --accent-900: color-mix(in srgb, var(--accent) 35%, black);
+
+      --focus-50: color-mix(in srgb, var(--focus) 12%, white);
+      --focus-100: color-mix(in srgb, var(--focus) 24%, white);
+      --focus-200: color-mix(in srgb, var(--focus) 40%, white);
+      --focus-300: color-mix(in srgb, var(--focus) 60%, white);
+      --focus-600: color-mix(in srgb, var(--focus) 60%, black);
+      --focus-700: color-mix(in srgb, var(--focus) 45%, black);
+      --focus-muted: color-mix(in srgb, var(--focus) 60%, white);
+      --focus-halo: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent);
+    }
+  }
 `;

package/src/styles/pillVariants.ts

@@ -100,10 +100,14 @@ export const pillVariants = css`
     border-color: var(--pill-border, var(--border));
     --icon-color: var(--text-2);
   }
+  /* Anchor-derived variants carry static pre-mixed bg/border values
+     for browsers without color-mix() (pre-Chrome 111); the @supports
+     block at the bottom re-derives them from the anchors so host
+     re-theming still works where color-mix() is available. */
   .pill-flow {
-    background: color-mix(in srgb, var(--flow) 12%, white);
+    background: #e3f4e9;
     color: var(--flow);
-    border-color: color-mix(in srgb, var(--flow) 25%, white);
+    border-color: #c5e8d2;
     --icon-color: var(--flow);
   }
   /* Recipient color — shared by contacts and groups. Anchored to
@@ -111,27 +115,27 @@ export const pillVariants = css`
      identity even when the host page re-themes via --primary-rgb. */
   .pill-contact,
   .pill-group {
-    background: color-mix(in srgb, var(--recipient) 12%, white);
+    background: #e5eef6;
     color: var(--recipient);
-    border-color: color-mix(in srgb, var(--recipient) 25%, white);
+    border-color: #cadbec;
     --icon-color: var(--recipient);
   }
   .pill-channel {
-    background: color-mix(in srgb, var(--channel) 12%, white);
+    background: #ede4f5;
     color: var(--channel);
-    border-color: color-mix(in srgb, var(--channel) 25%, white);
+    border-color: #dac8e9;
     --icon-color: var(--channel);
   }
   .pill-topic {
-    background: color-mix(in srgb, var(--topic) 12%, white);
+    background: #faefe1;
     color: var(--topic);
-    border-color: color-mix(in srgb, var(--topic) 25%, white);
+    border-color: #f6ddc1;
     --icon-color: var(--topic);
   }
   .pill-campaign {
-    background: color-mix(in srgb, var(--campaign) 12%, white);
+    background: #e1f2f6;
     color: var(--campaign);
-    border-color: color-mix(in srgb, var(--campaign) 25%, white);
+    border-color: #c1e4ec;
     --icon-color: var(--campaign);
   }
   .pill-field {
@@ -171,4 +175,32 @@ export const pillVariants = css`
     border-color: var(--pill-border, var(--border));
     --icon-color: var(--text-2);
   }
+
+  /* Anchor-derived bg/border for browsers with color-mix(). These
+     can't be simple same-rule fallbacks: a declaration containing
+     var() isn't dropped at parse time, it goes invalid at
+     computed-value time and takes the earlier declaration with it. */
+  @supports (color: color-mix(in srgb, red, red)) {
+    .pill-flow {
+      background: color-mix(in srgb, var(--flow) 12%, white);
+      border-color: color-mix(in srgb, var(--flow) 25%, white);
+    }
+    .pill-contact,
+    .pill-group {
+      background: color-mix(in srgb, var(--recipient) 12%, white);
+      border-color: color-mix(in srgb, var(--recipient) 25%, white);
+    }
+    .pill-channel {
+      background: color-mix(in srgb, var(--channel) 12%, white);
+      border-color: color-mix(in srgb, var(--channel) 25%, white);
+    }
+    .pill-topic {
+      background: color-mix(in srgb, var(--topic) 12%, white);
+      border-color: color-mix(in srgb, var(--topic) 25%, white);
+    }
+    .pill-campaign {
+      background: color-mix(in srgb, var(--campaign) 12%, white);
+      border-color: color-mix(in srgb, var(--campaign) 25%, white);
+    }
+  }
 `;

package/static/css/design-system.css

@@ -20,18 +20,22 @@
   --primary-rgb: 73, 127, 206;
 
   /* accent ramp — derived from --primary-rgb via sRGB mixing.
-     400 == primary; the ramp computes outward in both directions. */
+     400 == primary; the ramp computes outward in both directions.
+     Static values pre-mixed from the default anchor come first for
+     browsers without color-mix() (pre-Chrome 111); the @supports
+     block below re-derives them from --accent so re-theming via
+     --primary-rgb still works where color-mix() is available. */
   --accent:      rgb(var(--primary-rgb));
-  --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);
-  --accent-300:  color-mix(in srgb, var(--accent) 60%, white);
+  --accent-50:   #f4f7fc;
+  --accent-100:  #e2ebf7;
+  --accent-200:  #c5d6ef;
+  --accent-300:  #92b2e2;
   --accent-400:  var(--accent);
-  --accent-500:  color-mix(in srgb, var(--accent) 90%, black);
-  --accent-600:  color-mix(in srgb, var(--accent) 80%, black);
-  --accent-700:  color-mix(in srgb, var(--accent) 65%, black);
-  --accent-800:  color-mix(in srgb, var(--accent) 50%, black);
-  --accent-900:  color-mix(in srgb, var(--accent) 35%, black);
+  --accent-500:  #4272b9;
+  --accent-600:  #3a66a5;
+  --accent-700:  #2f5386;
+  --accent-800:  #244067;
+  --accent-900:  #1a2c48;
 
   /* neutrals */
   --bg:            #F6F7F9;
@@ -94,6 +98,24 @@
   --section-w-collapsed:  56px;
 }
 
+/* Where color-mix() is supported, derive the accent ramp from --accent
+   so re-theming via --primary-rgb works without design-system.js.
+   Custom properties can't fall back per-declaration (they're never
+   invalid at parse time), hence the @supports gate. */
+@supports (color: color-mix(in srgb, red, red)) {
+  :root {
+    --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);
+    --accent-300: color-mix(in srgb, var(--accent) 60%, white);
+    --accent-500: color-mix(in srgb, var(--accent) 90%, black);
+    --accent-600: color-mix(in srgb, var(--accent) 80%, black);
+    --accent-700: color-mix(in srgb, var(--accent) 65%, black);
+    --accent-800: color-mix(in srgb, var(--accent) 50%, black);
+    --accent-900: color-mix(in srgb, var(--accent) 35%, black);
+  }
+}
+
 /* ─── base ───────────────────────────────────────────────────────────── */
 .ds * { box-sizing: border-box; }
 .ds {
@@ -364,7 +386,13 @@
   color: white;
 }
 .ds .btn-danger:hover {
-  background: color-mix(in srgb, var(--danger) 88%, black);
+  /* pre-mixed fallback for browsers without color-mix() */
+  background: #b73737;
+}
+@supports (color: color-mix(in srgb, red, red)) {
+  .ds .btn-danger:hover {
+    background: color-mix(in srgb, var(--danger) 88%, black);
+  }
 }
 .ds .btn.is-disabled,
 .ds .btn:disabled { opacity: 0.45; cursor: not-allowed; }
@@ -533,7 +561,14 @@
 .ds .input:focus-within {
   outline: 0;
   border-color: var(--accent-300);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
+  /* translucent-ring fallback for browsers without color-mix() */
+  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
+}
+@supports (color: color-mix(in srgb, red, red)) {
+  .ds .input:focus,
+  .ds .input:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
+  }
 }
 
 .ds .input-tokens {

package/static/css/temba-components.css

@@ -41,15 +41,19 @@
     --curvature: 6px;
     --curvature-widget: 6px;
     --focus: rgb(var(--focus-rgb, 91, 156, 229));
-    --focus-50: color-mix(in srgb, var(--focus) 12%, white);
-    --focus-100: color-mix(in srgb, var(--focus) 24%, white);
-    --focus-200: color-mix(in srgb, var(--focus) 40%, white);
-    --focus-300: color-mix(in srgb, var(--focus) 60%, white);
-    --focus-600: color-mix(in srgb, var(--focus) 60%, black);
-    --focus-700: color-mix(in srgb, var(--focus) 45%, black);
-    --focus-muted: color-mix(in srgb, var(--focus) 60%, white);
-    --focus-halo: 0 0 0 3px
-      color-mix(in srgb, var(--focus) 30%, transparent);
+    /* Static values pre-mixed from the default focus hue for browsers
+       without color-mix(); re-derived in the @supports block below. */
+    --focus-50: #ebf3fc;
+    --focus-100: #d8e7f9;
+    --focus-200: #bdd7f5;
+    --focus-300: #9dc4ef;
+    --focus-600: #375e89;
+    --focus-700: #294667;
+    --focus-muted: #9dc4ef;
+    /* The halo is a translucent wash, so unlike the opaque ramp steps
+       it can keep tracking the theme without color-mix() — rgba(var())
+       substitution works wherever custom properties do. */
+    --focus-halo: 0 0 0 3px rgba(var(--focus-rgb, 91, 156, 229), 0.3);
     --color-focus: #a4cafe;
     --color-widget-bg: #fff;
     --color-widget-bg-focused: #fff;
@@ -201,6 +205,24 @@
 
   }
 
+  /* Where color-mix() is supported, derive the focus ramp from --focus
+     so re-theming via --focus-rgb works. Custom properties can't fall
+     back per-declaration (they're never invalid at parse time), hence
+     the @supports gate. */
+  @supports (color: color-mix(in srgb, red, red)) {
+    html {
+      --focus-50: color-mix(in srgb, var(--focus) 12%, white);
+      --focus-100: color-mix(in srgb, var(--focus) 24%, white);
+      --focus-200: color-mix(in srgb, var(--focus) 40%, white);
+      --focus-300: color-mix(in srgb, var(--focus) 60%, white);
+      --focus-600: color-mix(in srgb, var(--focus) 60%, black);
+      --focus-700: color-mix(in srgb, var(--focus) 45%, black);
+      --focus-muted: color-mix(in srgb, var(--focus) 60%, white);
+      --focus-halo: 0 0 0 3px
+        color-mix(in srgb, var(--focus) 30%, transparent);
+    }
+  }
+
   temba-button {
     --button-bg: var(--accent-500);
     --button-text: var(--color-text-light);

package/xliff/es.xlf

@@ -42,6 +42,9 @@
 <trans-unit id="s7722a91d3a512442">
   <source>Last seen <x id="0" equiv-text="${lastSeen.duration}"/></source>
 </trans-unit>
+<trans-unit id="s6dbbe2646b239ca5">
+  <source>Closed</source>
+</trans-unit>
 </body>
 </file>
 </xliff>

package/xliff/fr.xlf

@@ -41,6 +41,9 @@
 <trans-unit id="s7722a91d3a512442">
   <source>Last seen <x id="0" equiv-text="${lastSeen.duration}"/></source>
 </trans-unit>
+<trans-unit id="s6dbbe2646b239ca5">
+  <source>Closed</source>
+</trans-unit>
 </body>
 </file>
 </xliff>

package/xliff/pt.xlf

@@ -41,6 +41,9 @@
 <trans-unit id="s7722a91d3a512442">
   <source>Last seen <x id="0" equiv-text="${lastSeen.duration}"/></source>
 </trans-unit>
+<trans-unit id="s6dbbe2646b239ca5">
+  <source>Closed</source>
+</trans-unit>
 </body>
 </file>
 </xliff>