@nyaruka/temba-components 0.170.0 → 0.170.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.170.0",
+  "version": "0.170.1",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/display/Button.ts

@@ -101,9 +101,11 @@ export class Button extends LitElement {
         background: var(--success, #16a34a);
         color: #fff;
       }
+      /* Hover darkening: static pre-mixed values first for browsers
+         without color-mix(), re-derived from the token below. */
       .attention-button:hover,
       .affirmative:hover {
-        background: color-mix(in srgb, var(--success, #16a34a) 88%, black);
+        background: #138f41;
       }
 
       /* DS .btn-danger — flat danger fill (no lift). */
@@ -112,7 +114,17 @@ export class Button extends LitElement {
         color: #fff;
       }
       .destructive-button:hover {
-        background: color-mix(in srgb, var(--danger, #d03f3f) 88%, black);
+        background: #b73737;
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .attention-button:hover,
+        .affirmative:hover {
+          background: color-mix(in srgb, var(--success, #16a34a) 88%, black);
+        }
+        .destructive-button:hover {
+          background: color-mix(in srgb, var(--danger, #d03f3f) 88%, black);
+        }
       }
 
       /* DS .btn-ghost — text-only, hover fills with sunken */

package/src/display/Chat.ts

@@ -518,19 +518,15 @@ export class Chat extends RapidElement {
          same theme vars the flat fills used — color-mix keeps host
          re-theming working — with a whisper of shadow for depth and
          a hairline border mixed just darker than the fill so bubbles
-         hold their edge against the background. */
+         hold their edge against the background. Base rules carry flat
+         fills and pre-mixed borders for browsers without color-mix()
+         (pre-Chrome 111); the @supports block below layers the
+         gradients on top. */
       .bubble {
         padding: 10px 14px;
-        background: linear-gradient(
-          180deg,
-          color-mix(in srgb, var(--color-chat-in, #e5e5ea) 62%, white) 0%,
-          var(--color-chat-in, #e5e5ea) 100%
-        );
+        background: var(--color-chat-in, #e5e5ea);
         border-radius: 18px;
-        border: var(
-          --chat-border-in,
-          1px solid color-mix(in srgb, var(--color-chat-in, #e5e5ea) 93%, black)
-        );
+        border: var(--chat-border-in, 1px solid #d5d5da);
         box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
       }
 
@@ -550,20 +546,40 @@ export class Chat extends RapidElement {
       }
 
       .incoming .bubble {
-        background: linear-gradient(
-          180deg,
-          color-mix(in srgb, var(--color-chat-out, #007aff) 90%, white) 0%,
-          var(--color-chat-out, #007aff) 58%,
-          color-mix(in srgb, var(--color-chat-out, #007aff) 95%, black) 100%
-        );
-        border: var(
-          --chat-border-out,
-          1px solid
-            color-mix(in srgb, var(--color-chat-out, #007aff) 90%, black)
-        );
+        background: var(--color-chat-out, #007aff);
+        border: var(--chat-border-out, 1px solid #006ee6);
         color: white;
       }
 
+      @supports (color: color-mix(in srgb, red, red)) {
+        .bubble {
+          background: linear-gradient(
+            180deg,
+            color-mix(in srgb, var(--color-chat-in, #e5e5ea) 62%, white) 0%,
+            var(--color-chat-in, #e5e5ea) 100%
+          );
+          border: var(
+            --chat-border-in,
+            1px solid
+              color-mix(in srgb, var(--color-chat-in, #e5e5ea) 93%, black)
+          );
+        }
+
+        .incoming .bubble {
+          background: linear-gradient(
+            180deg,
+            color-mix(in srgb, var(--color-chat-out, #007aff) 90%, white) 0%,
+            var(--color-chat-out, #007aff) 58%,
+            color-mix(in srgb, var(--color-chat-out, #007aff) 95%, black) 100%
+          );
+          border: var(
+            --chat-border-out,
+            1px solid
+              color-mix(in srgb, var(--color-chat-out, #007aff) 90%, black)
+          );
+        }
+      }
+
       .incoming .latest .bubble {
         border-bottom-right-radius: 4px;
       }
@@ -573,8 +589,11 @@ export class Chat extends RapidElement {
       }
 
       /* Notes get the same top-lit gradient treatment as message
-         bubbles, derived from their sticky-note yellow. */
+         bubbles, derived from their sticky-note yellow. The flat fill
+         first is the fallback for browsers without color-mix() — all
+         literals here, so the invalid gradient drops at parse time. */
       .note .bubble {
+        background: #fffac3;
         background: linear-gradient(
           180deg,
           color-mix(in srgb, #fffac3 62%, white) 0%,

package/src/display/Label.ts

@@ -100,7 +100,10 @@ export default class Label extends LitElement {
          dark variant shade), so flow stays bluish, group stays purplish,
          etc. — no grey wash. */
       .label[class*='pill-'].clickable .mask:hover {
-        background: color-mix(in oklab, currentColor 10%, transparent);
+        /* Neutral wash first for browsers without color-mix() — the
+           currentColor mix can't fall back per-declaration because
+           currentColor keeps it valid until computed-value time. */
+        background: rgba(0, 0, 0, 0.06);
       }
       .label[class*='pill-'] temba-icon {
         margin-right: 0;
@@ -121,14 +124,26 @@ export default class Label extends LitElement {
         margin: 0;
         border: 0;
         border-radius: 999px;
-        background: color-mix(in oklab, currentColor 25%, transparent);
+        background: rgba(0, 0, 0, 0.12);
         color: inherit;
         opacity: 0.8;
         --icon-color: currentColor;
       }
       .label[class*='pill-'] .remove:hover {
         opacity: 1;
-        background: color-mix(in oklab, currentColor 45%, transparent);
+        background: rgba(0, 0, 0, 0.22);
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .label[class*='pill-'].clickable .mask:hover {
+          background: color-mix(in oklab, currentColor 10%, transparent);
+        }
+        .label[class*='pill-'] .remove {
+          background: color-mix(in oklab, currentColor 25%, transparent);
+        }
+        .label[class*='pill-'] .remove:hover {
+          background: color-mix(in oklab, currentColor 45%, transparent);
+        }
       }
 
       /* When a removable X is present, tighten the mask's left padding

package/src/form/select/Select.ts

@@ -371,14 +371,27 @@ export class Select<T extends SelectOption> extends FieldElement {
         margin: 0;
         border: 0;
         border-radius: 999px;
-        background: color-mix(in oklab, currentColor 25%, transparent);
+        /* Neutral wash first for browsers without color-mix(); the
+           currentColor-tinted version below needs the @supports gate
+           because currentColor keeps the declaration valid until
+           computed-value time. */
+        background: rgba(0, 0, 0, 0.12);
         color: inherit;
         opacity: 0.8;
         --icon-color: currentColor;
       }
       .multi .remove-item:hover {
         opacity: 1;
-        background: color-mix(in oklab, currentColor 45%, transparent);
+        background: rgba(0, 0, 0, 0.22);
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .multi .remove-item {
+          background: color-mix(in oklab, currentColor 25%, transparent);
+        }
+        .multi .remove-item:hover {
+          background: color-mix(in oklab, currentColor 45%, transparent);
+        }
       }
 
       input {

package/src/list/BroadcastList.ts

@@ -198,7 +198,8 @@ export class BroadcastList extends ContentList<Broadcast> {
       }
       .menu-button.destructive:hover {
         border-color: #dc2626;
-        background: color-mix(in srgb, #dc2626 6%, var(--surface, #fff));
+        /* pre-mixed fallback for browsers without color-mix() */
+        background: #fdf2f2;
       }
       .detail-body {
         display: flex;
@@ -243,15 +244,25 @@ export class BroadcastList extends ContentList<Broadcast> {
         align-items: flex-start;
         gap: 0.6em;
         padding: 0.9em 1em 1em;
-        background: color-mix(
-          in srgb,
-          var(--sunken, #f1f3f5) 45%,
-          var(--surface, #fff)
-        );
+        /* pre-mixed fallback for browsers without color-mix() */
+        background: #f9fafa;
         border: 1px solid var(--border, #e4e7ec);
         border-radius: var(--r);
         line-height: 1.5;
       }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .menu-button.destructive:hover {
+          background: color-mix(in srgb, #dc2626 6%, var(--surface, #fff));
+        }
+        .detail-message {
+          background: color-mix(
+            in srgb,
+            var(--sunken, #f1f3f5) 45%,
+            var(--surface, #fff)
+          );
+        }
+      }
       .detail-message temba-expression-highlight {
         align-self: stretch;
         white-space: pre-wrap;

package/src/list/ContentList.ts

@@ -154,24 +154,33 @@ export class ContentList<T = any> extends RapidElement {
         --sort-gutter: 16px;
         /* Selected-row wash — accent-50 on its own reads grey, so a
            touch of the accent-400 rail colour is mixed in to give
-           the selection a faint accent tint. */
-        --cl-selected: color-mix(
-          in oklab,
-          var(--accent-400) 9%,
-          var(--accent-50)
-        );
+           the selection a faint accent tint. Statics pre-mixed from
+           the default accent for browsers without color-mix(); the
+           @supports block below re-derives them from the tokens. */
+        --cl-selected: #e5ecf8;
         /* The dividers bracketing a selected row — the plain grey
            --border reads as a seam against the wash, so this is the
            same accent pushed a little further. */
-        --cl-selected-border: color-mix(
-          in oklab,
-          var(--accent-400) 24%,
-          var(--accent-50)
-        );
+        --cl-selected-border: #cbdaf1;
         /* Tint shared by the frozen (pinned) columns and the header
            row, so the header reads as the same quiet sub-panel as the
            pinned section. */
-        --cl-pin-bg: color-mix(in oklab, var(--sunken) 35%, var(--surface));
+        --cl-pin-bg: #fafbfc;
+      }
+      @supports (color: color-mix(in srgb, red, red)) {
+        :host {
+          --cl-selected: color-mix(
+            in oklab,
+            var(--accent-400) 9%,
+            var(--accent-50)
+          );
+          --cl-selected-border: color-mix(
+            in oklab,
+            var(--accent-400) 24%,
+            var(--accent-50)
+          );
+          --cl-pin-bg: color-mix(in oklab, var(--sunken) 35%, var(--surface));
+        }
       }
       /* fillWindow — take the slack of a height-bounded flex-column
          parent so the table scrolls internally; min-height: 0 (set
@@ -296,7 +305,14 @@ export class ContentList<T = any> extends RapidElement {
         color: var(--danger);
       }
       .bulk-action.destructive:hover {
-        background: color-mix(in oklab, var(--danger) 20%, white);
+        /* pre-mixed fallback for browsers without color-mix() */
+        background: #f6d9d9;
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .bulk-action.destructive:hover {
+          background: color-mix(in oklab, var(--danger) 20%, white);
+        }
       }
       .bulk-action temba-icon {
         --icon-color: currentColor;

package/src/list/FieldList.ts

@@ -377,7 +377,14 @@ export class FieldList extends EndpointMonitorElement {
 
       .menu-button.destructive:hover {
         border-color: #dc2626;
-        background: color-mix(in srgb, #dc2626 6%, var(--surface, #fff));
+        /* pre-mixed fallback for browsers without color-mix() */
+        background: #fdf2f2;
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .menu-button.destructive:hover {
+          background: color-mix(in srgb, #dc2626 6%, var(--surface, #fff));
+        }
       }
 
       .detail-body {

package/src/live/CampaignEvents.ts

@@ -273,11 +273,20 @@ export class CampaignEvents extends EndpointMonitorElement {
         justify-content: center;
         /* icons inside the dot take the dot's hue */
         --icon-color: var(--dot-color);
-        background: color-mix(
-          in srgb,
-          var(--dot-color) 12%,
-          var(--color-widget-bg, #fff)
-        );
+        /* plain widget bg for browsers without color-mix(); the tinted
+           fill below needs the @supports gate since var() keeps an
+           invalid declaration alive until computed-value time */
+        background: var(--color-widget-bg, #fff);
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .dot {
+          background: color-mix(
+            in srgb,
+            var(--dot-color) 12%,
+            var(--color-widget-bg, #fff)
+          );
+        }
       }
 
       /* the anchor marks the field's date itself - painted with the widget
@@ -470,7 +479,8 @@ export class CampaignEvents extends EndpointMonitorElement {
 
       .menu-button.destructive:hover {
         border-color: #dc2626;
-        background: color-mix(in srgb, #dc2626 6%, var(--surface, #fff));
+        /* pre-mixed fallback for browsers without color-mix() */
+        background: #fdf2f2;
       }
 
       /* the event's action, contained with a leading type label. Children
@@ -481,16 +491,26 @@ export class CampaignEvents extends EndpointMonitorElement {
         align-items: flex-start;
         gap: 0.6em;
         padding: 0.9em 1em 1em;
-        background: color-mix(
-          in srgb,
-          var(--sunken, #f1f3f5) 45%,
-          var(--surface, #fff)
-        );
+        /* pre-mixed fallback for browsers without color-mix() */
+        background: #f9fafa;
         border: 1px solid var(--border, #e4e7ec);
         border-radius: var(--r);
         line-height: 1.5;
       }
 
+      @supports (color: color-mix(in srgb, red, red)) {
+        .menu-button.destructive:hover {
+          background: color-mix(in srgb, #dc2626 6%, var(--surface, #fff));
+        }
+        .detail-action {
+          background: color-mix(
+            in srgb,
+            var(--sunken, #f1f3f5) 45%,
+            var(--surface, #fff)
+          );
+        }
+      }
+
       /* the close (✕) in the header's upper right - the square
          hover-wash button treatment (the pager buttons'), sitting
          just outboard of the action buttons */

package/src/live/ContactChat.ts

@@ -140,10 +140,18 @@ export class ContactChat extends ContactStoreElement {
 
       /* While the contact is in a flow the compose outline carries the
          flow hue: resting border matches the flow pill border, focus
-         goes solid flow green */
+         goes solid flow green. The pre-mixed static comes first — a
+         custom property can't fall back per-declaration, so the
+         derived version needs the @supports gate. */
       .in-flow .compose {
-        --compose-border: 1px solid
-          color-mix(in srgb, var(--flow, #16a34a) 25%, white);
+        --compose-border: 1px solid #c5e8d2;
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .in-flow .compose {
+          --compose-border: 1px solid
+            color-mix(in srgb, var(--flow, #16a34a) 25%, white);
+        }
       }
 
       .in-flow .compose temba-compose {
@@ -459,10 +467,18 @@ export class ContactChat extends ContactStoreElement {
          status-area grey. Fallbacks match the --flow design token for
          pages without tokens. */
       .in-flow .contact-status {
-        background: color-mix(in srgb, var(--flow, #16a34a) 12%, white);
+        /* pre-mixed statics first for browsers without color-mix() */
+        background: #e3f4e9;
         color: var(--flow, #16a34a);
         --icon-color: var(--flow, #16a34a);
-        border-top-color: color-mix(in srgb, var(--flow, #16a34a) 25%, white);
+        border-top-color: #c5e8d2;
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .in-flow .contact-status {
+          background: color-mix(in srgb, var(--flow, #16a34a) 12%, white);
+          border-top-color: color-mix(in srgb, var(--flow, #16a34a) 25%, white);
+        }
       }
 
       /* compact the interrupt button to the row's caption scale */
@@ -530,7 +546,14 @@ export class ContactChat extends ContactStoreElement {
       }
 
       .in-flow .chat-box {
-        background: color-mix(in srgb, var(--flow, #16a34a) 12%, white);
+        /* pre-mixed static first for browsers without color-mix() */
+        background: #e3f4e9;
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .in-flow .chat-box {
+          background: color-mix(in srgb, var(--flow, #16a34a) 12%, white);
+        }
       }
 
       .ticket-controls {

package/src/live/ContactTimeline.ts

@@ -189,24 +189,36 @@ export class ContactTimeline extends EndpointMonitorElement {
         padding: 0.05em 0.65em;
         border-radius: 999px;
         white-space: nowrap;
-        background: color-mix(
-          in srgb,
-          var(--pill-hue) 12%,
-          var(--color-widget-bg, #fff)
-        );
-        border: 1px solid
-          color-mix(in srgb, var(--pill-hue) 25%, var(--color-widget-bg, #fff));
+        /* plain bg / neutral border for browsers without color-mix();
+           the hue-tinted versions live in the @supports block below */
+        background: var(--color-widget-bg, #fff);
+        border: 1px solid var(--pill-hue);
         color: var(--pill-hue);
         cursor: pointer;
         transition: background 100ms ease-in-out;
       }
 
-      .campaign-pill:hover {
-        background: color-mix(
-          in srgb,
-          var(--pill-hue) 22%,
-          var(--color-widget-bg, #fff)
-        );
+      @supports (color: color-mix(in srgb, red, red)) {
+        .campaign-pill {
+          background: color-mix(
+            in srgb,
+            var(--pill-hue) 12%,
+            var(--color-widget-bg, #fff)
+          );
+          border: 1px solid
+            color-mix(
+              in srgb,
+              var(--pill-hue) 25%,
+              var(--color-widget-bg, #fff)
+            );
+        }
+        .campaign-pill:hover {
+          background: color-mix(
+            in srgb,
+            var(--pill-hue) 22%,
+            var(--color-widget-bg, #fff)
+          );
+        }
       }
 
       .campaign-pill:focus-visible {
@@ -289,24 +301,34 @@ export class ContactTimeline extends EndpointMonitorElement {
       }
 
       /* past events are filled with a lighter tint of the same hue and keep
-         the solid border - they're settled, whether real or projected */
+         the solid border - they're settled, whether real or projected.
+         Plain widget bg first for browsers without color-mix(). */
       .dot.past {
-        background: color-mix(
-          in srgb,
-          var(--dot-color) 25%,
-          var(--color-widget-bg, #fff)
-        );
+        background: var(--color-widget-bg, #fff);
       }
 
       /* future events haven't occurred yet - signal that with a dotted
          border and the faintest tint of the hue inside */
       .dot.future {
         border-style: dotted;
-        background: color-mix(
-          in srgb,
-          var(--dot-color) 8%,
-          var(--color-widget-bg, #fff)
-        );
+        background: var(--color-widget-bg, #fff);
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .dot.past {
+          background: color-mix(
+            in srgb,
+            var(--dot-color) 25%,
+            var(--color-widget-bg, #fff)
+          );
+        }
+        .dot.future {
+          background: color-mix(
+            in srgb,
+            var(--dot-color) 8%,
+            var(--color-widget-bg, #fff)
+          );
+        }
       }
 
       /* the now dot and label both paint with the SPA content background

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);
+    }
+  }
 `;