Navigation

 v0.0.4
Data display

Chart

A few numbers as bars, drawn by the stylesheet from a list.

On this page

A chart shows a few numbers as bars. It is a list: every item carries its number once for the drawing and once as text, and the stylesheet draws the bar, the scale behind it and the value under the pointer. Bars are ink, the way a progress bar fills with ink. There is no script and no SVG.

Chart

<div class="card max-w(420) mx-auto">  <div class="card-header">    <h3 class="card-title">Deployments</h3>    <p class="card-description">311 this week</p>  </div>  <ol class="chart" aria-label="Deployments per day, this week">    <li class="chart-item" style="--value: 42">      <span class="chart-label">Mon</span>      <span class="chart-value">42</span>    </li>    <li class="chart-item" style="--value: 58">      <span class="chart-label">Tue</span>      <span class="chart-value">58</span>    </li>    <li class="chart-item" style="--value: 36">      <span class="chart-label">Wed</span>      <span class="chart-value">36</span>    </li>    <li class="chart-item" style="--value: 71">      <span class="chart-label">Thu</span>      <span class="chart-value">71</span>    </li>    <li class="chart-item" style="--value: 64">      <span class="chart-label">Fri</span>      <span class="chart-value">64</span>    </li>    <li class="chart-item" style="--value: 22">      <span class="chart-label">Sat</span>      <span class="chart-value">22</span>    </li>    <li class="chart-item" style="--value: 18">      <span class="chart-label">Sun</span>      <span class="chart-value">18</span>    </li>  </ol></div>
Point at a column: the other bars step back and the value appears.

#How a bar gets its height

Each chart-item sets --value in its style. The chart sets the top of the scale with --chart-max, 100 unless you say otherwise, and the plot's height with --chart-height. A bar is its share of the maximum; a value above the maximum fills the plot, and a value of nothing leaves a one-pixel tick on the baseline, so an empty day is still a day.

The number is written twice on purpose. --value is for the drawing. chart-value is the same number as text, formatted the way a person reads it: the tip under the pointer shows it, and so does a screen reader, a search and a copy.

Four hairlines mark even steps of the scale. Set --chart-lines to match your maximum: five lines for a scale of 100 put one at every 20.

#One bar that matters

chart-quiet turns the bars into a tint and keeps the ink for the item marked aria-current: today in a week, the plan a reader is on, the release being discussed.

Quiet

<div class="card max-w(420) mx-auto">  <div class="card-header">    <h3 class="card-title">Build minutes</h3>    <p class="card-description">Thursday so far</p>  </div>  <ol class="chart chart-quiet" aria-label="Build minutes per day, this week">    <li class="chart-item" style="--value: 42">      <span class="chart-label">Mon</span>      <span class="chart-value">42</span>    </li>    <li class="chart-item" style="--value: 58">      <span class="chart-label">Tue</span>      <span class="chart-value">58</span>    </li>    <li class="chart-item" style="--value: 36">      <span class="chart-label">Wed</span>      <span class="chart-value">36</span>    </li>    <li class="chart-item" style="--value: 71" aria-current="true">      <span class="chart-label">Thu</span>      <span class="chart-value">71</span>    </li>    <li class="chart-item" style="--value: 64">      <span class="chart-label">Fri</span>      <span class="chart-value">64</span>    </li>    <li class="chart-item" style="--value: 22">      <span class="chart-label">Sat</span>      <span class="chart-value">22</span>    </li>    <li class="chart-item" style="--value: 18">      <span class="chart-label">Sun</span>      <span class="chart-value">18</span>    </li>  </ol></div>

#Values in view

chart-values writes every value over its bar as plain figures. Use it when there are few bars and the exact numbers are the point, or on a touch screen, where nothing hovers.

Values

<div class="card max-w(420) mx-auto">  <ol class="chart chart-values" style="--chart-height: 8rem" aria-label="Signups per day, this week">    <li class="chart-item" style="--value: 42">      <span class="chart-label">Mon</span>      <span class="chart-value">42</span>    </li>    <li class="chart-item" style="--value: 58">      <span class="chart-label">Tue</span>      <span class="chart-value">58</span>    </li>    <li class="chart-item" style="--value: 36">      <span class="chart-label">Wed</span>      <span class="chart-value">36</span>    </li>    <li class="chart-item" style="--value: 71">      <span class="chart-label">Thu</span>      <span class="chart-value">71</span>    </li>    <li class="chart-item" style="--value: 64">      <span class="chart-label">Fri</span>      <span class="chart-value">64</span>    </li>    <li class="chart-item" style="--value: 22">      <span class="chart-label">Sat</span>      <span class="chart-value">22</span>    </li>    <li class="chart-item" style="--value: 18">      <span class="chart-label">Sun</span>      <span class="chart-value">18</span>    </li>  </ol></div>

#Many bars

Columns share the width equally, so a month fits where a week did. Narrow the space between bars with --chart-gap. A name is centered on its bar and may be wider than its column: name every seventh item and leave the others empty. An item with an empty name takes an aria-label instead, so its value still has something to belong to.

Thirty days

656 px 
<div class="card max-w(520) mx-auto">  <div class="card-header">    <h3 class="card-title">Requests</h3>    <p class="card-description">Thousands per day, November</p>  </div>  <ol class="chart" style="--chart-gap: 3px; --chart-height: 7rem" aria-label="Requests per day in November, in thousands">    <li class="chart-item" style="--value: 49">      <span class="chart-label">Nov 1</span>      <span class="chart-value">49</span>    </li>    <li class="chart-item" style="--value: 27" aria-label="Nov 2">      <span class="chart-label"></span>      <span class="chart-value">27</span>    </li>    <li class="chart-item" style="--value: 58" aria-label="Nov 3">      <span class="chart-label"></span>      <span class="chart-value">58</span>    </li>    <li class="chart-item" style="--value: 91" aria-label="Nov 4">      <span class="chart-label"></span>      <span class="chart-value">91</span>    </li>    <li class="chart-item" style="--value: 14" aria-label="Nov 5">      <span class="chart-label"></span>      <span class="chart-value">14</span>    </li>    <li class="chart-item" style="--value: 17" aria-label="Nov 6">      <span class="chart-label"></span>      <span class="chart-value">17</span>    </li>    <li class="chart-item" style="--value: 76" aria-label="Nov 7">      <span class="chart-label"></span>      <span class="chart-value">76</span>    </li>    <li class="chart-item" style="--value: 20">      <span class="chart-label">Nov 8</span>      <span class="chart-value">20</span>    </li>    <li class="chart-item" style="--value: 54" aria-label="Nov 9">      <span class="chart-label"></span>      <span class="chart-value">54</span>    </li>    <li class="chart-item" style="--value: 82" aria-label="Nov 10">      <span class="chart-label"></span>      <span class="chart-value">82</span>    </li>    <li class="chart-item" style="--value: 15" aria-label="Nov 11">      <span class="chart-label"></span>      <span class="chart-value">15</span>    </li>    <li class="chart-item" style="--value: 72" aria-label="Nov 12">      <span class="chart-label"></span>      <span class="chart-value">72</span>    </li>    <li class="chart-item" style="--value: 35" aria-label="Nov 13">      <span class="chart-label"></span>      <span class="chart-value">35</span>    </li>    <li class="chart-item" style="--value: 12" aria-label="Nov 14">      <span class="chart-label"></span>      <span class="chart-value">12</span>    </li>    <li class="chart-item" style="--value: 19">      <span class="chart-label">Nov 15</span>      <span class="chart-value">19</span>    </li>    <li class="chart-item" style="--value: 63" aria-label="Nov 16">      <span class="chart-label"></span>      <span class="chart-value">63</span>    </li>    <li class="chart-item" style="--value: 61" aria-label="Nov 17">      <span class="chart-label"></span>      <span class="chart-value">61</span>    </li>    <li class="chart-item" style="--value: 16" aria-label="Nov 18">      <span class="chart-label"></span>      <span class="chart-value">16</span>    </li>    <li class="chart-item" style="--value: 38" aria-label="Nov 19">      <span class="chart-label"></span>      <span class="chart-value">38</span>    </li>    <li class="chart-item" style="--value: 19" aria-label="Nov 20">      <span class="chart-label"></span>      <span class="chart-value">19</span>    </li>    <li class="chart-item" style="--value: 78" aria-label="Nov 21">      <span class="chart-label"></span>      <span class="chart-value">78</span>    </li>    <li class="chart-item" style="--value: 62">      <span class="chart-label">Nov 22</span>      <span class="chart-value">62</span>    </li>    <li class="chart-item" style="--value: 15" aria-label="Nov 23">      <span class="chart-label"></span>      <span class="chart-value">15</span>    </li>    <li class="chart-item" style="--value: 80" aria-label="Nov 24">      <span class="chart-label"></span>      <span class="chart-value">80</span>    </li>    <li class="chart-item" style="--value: 23" aria-label="Nov 25">      <span class="chart-label"></span>      <span class="chart-value">23</span>    </li>    <li class="chart-item" style="--value: 36" aria-label="Nov 26">      <span class="chart-label"></span>      <span class="chart-value">36</span>    </li>    <li class="chart-item" style="--value: 88" aria-label="Nov 27">      <span class="chart-label"></span>      <span class="chart-value">88</span>    </li>    <li class="chart-item" style="--value: 88" aria-label="Nov 28">      <span class="chart-label"></span>      <span class="chart-value">88</span>    </li>    <li class="chart-item" style="--value: 82">      <span class="chart-label">Nov 29</span>      <span class="chart-value">82</span>    </li>    <li class="chart-item" style="--value: 15" aria-label="Nov 30">      <span class="chart-label"></span>      <span class="chart-value">15</span>    </li>  </ol></div>

#Horizontal

chart-horizontal is a ranking: one row to an item. The name lies on a tint as long as the item's share and the figure stands at the end of the row, so both are read without a pointer. Set --chart-max to the largest value so the first row spans the column.

Horizontal

<div class="card max-w(420) mx-auto">  <div class="card-header">    <h3 class="card-title">Top pages</h3>    <p class="card-description">Visitors in the last 7 days</p>  </div>  <ol class="chart chart-horizontal" style="--chart-max: 4820" aria-label="Pages by visitors">    <li class="chart-item" style="--value: 4820">      <span class="chart-label">/guide/installation</span>      <span class="chart-value">4,820</span>    </li>    <li class="chart-item" style="--value: 3112">      <span class="chart-label">/components/button</span>      <span class="chart-value">3,112</span>    </li>    <li class="chart-item" style="--value: 2240">      <span class="chart-label">/components/dialog</span>      <span class="chart-value">2,240</span>    </li>    <li class="chart-item" style="--value: 1360">      <span class="chart-label">/guide/theme</span>      <span class="chart-value">1,360</span>    </li>    <li class="chart-item" style="--value: 412">      <span class="chart-label">/components/command</span>      <span class="chart-value">412</span>    </li>  </ol></div>

#Spark

chart-spark keeps only the bars: 32px tall, 6px wide, with no scale. It is as wide as its bars, so it sits at the end of a stat or in a table cell. The names and the values stay in the list, hidden from sight and still read aloud.

Spark

<div class="tray grid grid-cols(2) gap(4) max-w(560) mx-auto">  <div class="card card-flat">    <div class="stat">      <p class="stat-label">Requests</p>      <div class="stat-row">        <p class="stat-value">1.28M</p>        <p class="stat-delta stat-delta-up">12.4%</p>        <ol class="chart chart-spark ml-auto" style="--chart-max: 71" aria-label="Requests per day, last 14 days">          <li class="chart-item" style="--value: 18">            <span class="chart-label">Day 1</span>            <span class="chart-value">18</span>          </li>          <li class="chart-item" style="--value: 24">            <span class="chart-label">Day 2</span>            <span class="chart-value">24</span>          </li>          <li class="chart-item" style="--value: 22">            <span class="chart-label">Day 3</span>            <span class="chart-value">22</span>          </li>          <li class="chart-item" style="--value: 31">            <span class="chart-label">Day 4</span>            <span class="chart-value">31</span>          </li>          <li class="chart-item" style="--value: 28">            <span class="chart-label">Day 5</span>            <span class="chart-value">28</span>          </li>          <li class="chart-item" style="--value: 36">            <span class="chart-label">Day 6</span>            <span class="chart-value">36</span>          </li>          <li class="chart-item" style="--value: 33">            <span class="chart-label">Day 7</span>            <span class="chart-value">33</span>          </li>          <li class="chart-item" style="--value: 41">            <span class="chart-label">Day 8</span>            <span class="chart-value">41</span>          </li>          <li class="chart-item" style="--value: 38">            <span class="chart-label">Day 9</span>            <span class="chart-value">38</span>          </li>          <li class="chart-item" style="--value: 52">            <span class="chart-label">Day 10</span>            <span class="chart-value">52</span>          </li>          <li class="chart-item" style="--value: 47">            <span class="chart-label">Day 11</span>            <span class="chart-value">47</span>          </li>          <li class="chart-item" style="--value: 58">            <span class="chart-label">Day 12</span>            <span class="chart-value">58</span>          </li>          <li class="chart-item" style="--value: 63">            <span class="chart-label">Day 13</span>            <span class="chart-value">63</span>          </li>          <li class="chart-item" style="--value: 71">            <span class="chart-label">Day 14</span>            <span class="chart-value">71</span>          </li>        </ol>      </div>    </div>  </div>  <div class="card card-flat">    <div class="stat">      <p class="stat-label">Error rate</p>      <div class="stat-row">        <p class="stat-value">0.02%</p>        <p class="stat-delta stat-delta-down">0.4%</p>        <ol class="chart chart-spark ml-auto" style="--chart-max: 62" aria-label="Errors per day, last 14 days">          <li class="chart-item" style="--value: 62">            <span class="chart-label">Day 1</span>            <span class="chart-value">62</span>          </li>          <li class="chart-item" style="--value: 58">            <span class="chart-label">Day 2</span>            <span class="chart-value">58</span>          </li>          <li class="chart-item" style="--value: 60">            <span class="chart-label">Day 3</span>            <span class="chart-value">60</span>          </li>          <li class="chart-item" style="--value: 51">            <span class="chart-label">Day 4</span>            <span class="chart-value">51</span>          </li>          <li class="chart-item" style="--value: 49">            <span class="chart-label">Day 5</span>            <span class="chart-value">49</span>          </li>          <li class="chart-item" style="--value: 44">            <span class="chart-label">Day 6</span>            <span class="chart-value">44</span>          </li>          <li class="chart-item" style="--value: 46">            <span class="chart-label">Day 7</span>            <span class="chart-value">46</span>          </li>          <li class="chart-item" style="--value: 38">            <span class="chart-label">Day 8</span>            <span class="chart-value">38</span>          </li>          <li class="chart-item" style="--value: 35">            <span class="chart-label">Day 9</span>            <span class="chart-value">35</span>          </li>          <li class="chart-item" style="--value: 31">            <span class="chart-label">Day 10</span>            <span class="chart-value">31</span>          </li>          <li class="chart-item" style="--value: 33">            <span class="chart-label">Day 11</span>            <span class="chart-value">33</span>          </li>          <li class="chart-item" style="--value: 26">            <span class="chart-label">Day 12</span>            <span class="chart-value">26</span>          </li>          <li class="chart-item" style="--value: 22">            <span class="chart-label">Day 13</span>            <span class="chart-value">22</span>          </li>          <li class="chart-item" style="--value: 19">            <span class="chart-label">Day 14</span>            <span class="chart-value">19</span>          </li>        </ol>      </div>    </div>  </div></div>

#Motion

A bar rises from the baseline when it first appears, with @starting-style, and eases to a new height when --value changes. With reduced motion it does neither. A bar under the pointer answers at once, with no fade, because the highlight has to keep up with a hand moving along the columns.

#When a list of bars is not enough

This is a chart for a handful of numbers on one scale. A line, an area, two series side by side, a zoom or a time axis with gaps need a charting library, and a single reading within a range is a meter.

#Accessibility

  • Use <ol> when the order means something, such as days, and <ul> for a ranking you have already sorted. Give the list an aria-label that says what is measured and in what unit.
  • Each item reads as its name and its value. Do not rely on the tip: it appears only under a pointer.
  • Bars are told apart by position and length, never by hue. If you set --chart-color to a status color, say the status in words nearby.
  • In forced colors the bars take the system text color.

#Classes

ClassDescription
chartThe list and its plot: bars on a divider, with hairlines at even steps of the scale
chart-quietTinted bars; the item with aria-current is ink. With chart
chart-valuesEvery value written over its bar as plain figures, with no pointer needed. With chart
chart-horizontalRows for a ranking: the name on a tint as long as the item's share, the figure at the end. With chart
chart-sparkBars alone, 32px tall and 6px wide; names and values stay in the list for assistive technology. With chart
chart-itemOne bar; set --value in its style
chart-labelThe item's name, centered under its bar
chart-valueThe item's number as text: a small tip over the bar, shown while the pointer is on the column

#Custom properties

PropertyDefaultDescription
--valueThe item's number; the stylesheet reads 0 when it is not set. On chart-item
--chart-max100The top of the scale; a value above it fills the plot
--chart-height10remHeight of the plot
--chart-gap.375remSpace between bars
--chart-lines4Steps of the scale marked by a hairline
--chart-bar-width2.5remThe widest a bar gets
--chart-colorvar(--color-surface-inverse)The ink of the bars

#Source

@master/ui/components/chart.css
/* * Chart: a few numbers as bars, drawn by the stylesheet from a list. * Each item of the list is one bar: it carries its number as --value, its name as chart-label and the number * again as chart-value, so the list reads as data to anyone who is not looking at it. Bars are ink, the way a * progress bar fills with ink; they stand on a divider with hairlines behind them at even steps of the scale. * The plot is --chart-height tall and a bar is its share of --chart-max. Under the pointer the other bars * step back and the bar's value appears over it as a small ink tip. * chart-horizontal turns the list into rows: the name lies on a tint as long as its share, the figure at the end. * chart-spark keeps only the bars, small enough for a line of text or the corner of a card. * Bars rise from the baseline when they first appear and ease to a new value; reduced motion removes both. */@layer components {  .chart {    --chart-height: 10rem;    --chart-max: 100;    --chart-gap: .375rem;    --chart-lines: 4;    --chart-color: var(--color-surface-inverse);    --chart-bar-width: 2.5rem;    --chart-radius: var(--radius-chip);    /* The surface the chart stands on, which a card or a sheet publishes. */    --chart-surface: var(--surface-color, var(--color-surface-base));    position: relative;    display: grid;    grid-template-rows: var(--chart-height) auto;    grid-auto-columns: minmax(0, 1fr);    grid-auto-flow: column;    column-gap: var(--chart-gap);    min-width: 0;    margin: 0;    padding: 0;    color: var(--color-text-muted);    font: 400 .71875rem/1.4 var(--font-family-sans);    font-feature-settings: inherit;    font-variant-numeric: tabular-nums;    list-style: none;    /* The scale: a hairline at each step, and the divider the bars stand on. */    &::before {      content: '';      position: absolute;      inset: 0 0 auto;      height: var(--chart-height);      border-bottom: 1px solid var(--color-line-divider);      background: repeating-linear-gradient(to bottom, var(--color-line-hair) 0 1px, transparent 1px calc(100% / var(--chart-lines)));      pointer-events: none;    }    /* Quiet: bars are a tint, and the one marked aria-current is the ink. For a period in which one day matters. */    &.chart-quiet {      .chart-item:not([aria-current]) {        --chart-item-color: color-mix(in oklab, var(--chart-color) 15%, var(--chart-surface));        &::before {          box-shadow: inset 0 0 0 .5px color-mix(in oklab, var(--chart-color) 12%, transparent);        }      }    }    /* Every value is written over its bar, as plain figures. */    &.chart-values {      .chart-value {        padding: 0;        background: none;        color: var(--color-text-body);        box-shadow: none;        opacity: 1;      }    }    /* Spark: bars alone. The names and the numbers stay in the list for assistive technology. */    &.chart-spark {      --chart-height: 2rem;      --chart-gap: 2px;      --chart-radius: 1.5px;      --chart-bar-width: .375rem;      display: inline-grid;      grid-template-rows: var(--chart-height);      grid-auto-columns: var(--chart-bar-width);      vertical-align: bottom;      &::before {        content: none;      }      .chart-label, .chart-value {        position: absolute;        width: 1px;        height: 1px;        overflow: hidden;        clip-path: inset(50%);        white-space: nowrap;      }    }    /*     * Horizontal: one row to an item, for a ranking. The name lies on a tint as long as the item's share and     * the figure stands at the end of the row, so both are read without the pointer.     */    &.chart-horizontal {      --chart-radius: var(--radius-control-sm);      grid-template-rows: none;      grid-template-columns: minmax(0, 1fr) auto;      grid-auto-flow: row;      gap: .25rem 1rem;      font-size: .8125rem;      &::before {        content: none;      }      .chart-item {        grid-row: auto;        grid-column: 1 / -1;        grid-template-rows: none;        grid-template-columns: subgrid;        align-items: center;        justify-items: start;        min-height: 2rem;        &::before {          grid-row: 1;          grid-column: 1;          align-self: stretch;          justify-self: start;          width: calc(var(--chart-share) * 100%);          min-width: 2px;          max-width: none;          height: auto;          min-height: 0;          border-radius: calc(var(--chart-radius) * var(--corner-scale));          background: color-mix(in oklab, var(--chart-color) 9%, transparent);          box-shadow: none;          transition-property: width;          @starting-style {            width: 0;          }        }      }      .chart-label {        grid-row: 1;        grid-column: 1;        z-index: 1;        max-width: 100%;        margin: 0;        padding-inline: .625rem;        overflow: hidden;        color: var(--color-text-strong);        text-overflow: ellipsis;      }      .chart-value {        grid-row: 1;        grid-column: 2;        align-self: center;        justify-self: end;        margin: 0;        padding: 0;        background: none;        color: var(--color-text-muted);        box-shadow: none;        font-size: inherit;        opacity: 1;      }      @media (hover: hover) {        .chart-item:hover::before {          background: color-mix(in oklab, var(--chart-color) 15%, transparent);        }        .chart-item:hover .chart-value {          color: var(--color-text-strong);        }      }    }    @media (hover: hover) {      /*       * A bar answers the pointer at once: the others step back to a tint, with no fade to wait for.       * The tint is mixed with the surface behind the chart, so the scale does not show through a bar.       */      &:not(.chart-quiet, .chart-horizontal):has(.chart-item:hover) .chart-item:not(:hover) {        --chart-item-color: color-mix(in oklab, var(--chart-color) 28%, var(--chart-surface));        &::before {          box-shadow: none;        }      }      &.chart-quiet .chart-item:not([aria-current]):hover {        --chart-item-color: color-mix(in oklab, var(--chart-color) 36%, var(--chart-surface));      }      .chart-item:hover .chart-value {        opacity: 1;      }    }    @media (forced-colors: active) {      --chart-color: CanvasText;    }  }  /* One bar: a column of the plot and, under it, the cell for its name. */  .chart-item {    /* The bar's share of the scale, between nothing and all of it. */    --chart-share: clamp(0, calc(var(--value, 0) / var(--chart-max)), 1);    position: relative;    display: grid;    grid-row: 1 / span 2;    grid-template-rows: subgrid;    grid-template-columns: minmax(0, 1fr);    justify-items: center;    min-width: 0;    margin: 0;    padding: 0;    /* The bar. Its top corners turn; its foot is square on the baseline. A value of nothing leaves a 1px tick. */    &::before {      content: '';      grid-row: 1;      grid-column: 1;      align-self: end;      width: 100%;      max-width: var(--chart-bar-width);      height: calc(var(--chart-height) * var(--chart-share));      min-height: 1px;      border-radius: calc(var(--chart-radius) * var(--corner-scale)) calc(var(--chart-radius) * var(--corner-scale)) 0 0;      corner-shape: var(--corner-shape);      background: var(--chart-item-color, var(--chart-color));      box-shadow: var(--shadow-ink-top);      transition-property: height;      transition-duration: var(--duration-base);      transition-timing-function: var(--easing-glide);      @starting-style {        height: 0;      }      @media (prefers-reduced-motion: reduce) {        transition: none;      }      @media (forced-colors: active) {        forced-color-adjust: none;      }    }    /* The bar that is the point of the chart keeps a firmer name. */    &[aria-current] .chart-label {      color: var(--color-text-strong);    }  }  /*   * The name under a bar, centered on it. It may be wider than its column, so in a dense chart name every   * fifth or seventh item and leave the others empty; an empty name keeps its column.   */  .chart-label {    grid-row: 2;    grid-column: 1;    margin-top: .5rem;    white-space: nowrap;  }  /* The number over its bar: a small ink tip, shown while the pointer is on the column. */  .chart-value {    grid-row: 1;    grid-column: 1;    z-index: 1;    align-self: end;    margin-bottom: calc(var(--chart-height) * var(--chart-share) + .3125rem);    padding: .1875rem .375rem;    border-radius: calc(var(--radius-chip) * var(--corner-scale));    corner-shape: var(--corner-shape);    background: var(--color-surface-tip);    color: light-dark(var(--color-text-inverse), var(--color-text-strong));    box-shadow: var(--shadow-tip);    font-size: .71875rem;    line-height: 1.2;    white-space: nowrap;    opacity: 0;    pointer-events: none;  }}