TubeSpanner Style Guide

Search Field: Nav search 

<div class="search-area" style="position:relative;display:inline-block;">
    <input type="text" class="form-control" placeholder="Search…" value="" style="background:var(--primary-light);border:0;border-radius:8px;padding-left:36px;width:180px;box-shadow:none;">
    <span style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--paragraph);">🔍</span>
</div>
 
<div class="search-area" style="position:relative;display:inline-block;">
  <input
    type="text"
    class="form-control"
    placeholder="{{placeholder}}"
    value="{{value}}"
    style="background:var(--primary-light);border:0;border-radius:8px;padding-left:36px;width:{{width}};box-shadow:none;"
  >
  <span style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--paragraph);">🔍</span>
</div>
 
{
  "placeholder": "Search…",
  "value": "",
  "width": "180px"
}

Uses .search-area wrapper. Background is --primary-light (no border). Fixed width of 180px in the nav — can expand for full-width search contexts. Search icon is an SVG in production.