@scattered-light/loomiere 0.5.3 → 0.7.0

package/tokens/semantic/calendar.json

@@ -0,0 +1,75 @@
+{
+  "calendar": {
+    "$description": "A month grid for picking a date or a period. Colors come from the item, emphasis and interactive concepts so a calendar follows the same selection language as a list. Sizes that are only about the grid live here because no other concept owns a day cell.",
+    "day-size": {
+      "$value": "{space.10}",
+      "$type": "dimension",
+      "$description": "A day cell on a pointer. space.10 keeps seven columns inside a phone; touch layouts raise the cell to the minimum touch target in CSS."
+    },
+    "day-radius": {
+      "$value": "{radius.pill}",
+      "$type": "dimension",
+      "$description": "Selected days are circles. The pill radius is the same full radius badges and switches use."
+    },
+    "day-color": {
+      "$value": "{text.primary}",
+      "$type": "color",
+      "$description": "A day in the month being shown."
+    },
+    "day-color-outside": {
+      "$value": "{text.tertiary}",
+      "$type": "color",
+      "$description": "A day from the previous or next month, still selectable, drawn back so it does not compete with this month."
+    },
+    "day-color-disabled": {
+      "$value": "{text.disabled}",
+      "$type": "color",
+      "$description": "A day outside the allowed period, or one a length rule rejects. It stays in the tab order so the reason can be read."
+    },
+    "day-background-hover": {
+      "$value": "{item.background-hover}",
+      "$type": "color",
+      "$description": "The same hover tint as a list item, so a day feels like a choice in a list."
+    },
+    "range-background": {
+      "$value": "{interactive.tint-active}",
+      "$type": "color",
+      "$description": "The band between the start and end of a period. Same tint as a selected list item, quieter than the start and end circles."
+    },
+    "range-color": {
+      "$value": "{text.on-tint-strong}",
+      "$type": "color",
+      "$description": "Day numbers that sit on the range band. The on-tint text color is the one that stays readable on interactive.tint-active."
+    },
+    "today-ring": {
+      "$value": "{border.accent}",
+      "$type": "color",
+      "$description": "An inset ring on today, including when today is also selected, so today is never only a color of the number."
+    },
+    "weekday-color": {
+      "$value": "{text.tertiary}",
+      "$type": "color",
+      "$description": "Weekday initials and week numbers are labels, not choices."
+    },
+    "grid-gap": {
+      "$value": "{space.0-5}",
+      "$type": "dimension",
+      "$description": "Space between week rows. Days in a week share an edge, so the range band reads as one shape."
+    },
+    "month-gap": {
+      "$value": "{space.4}",
+      "$type": "dimension",
+      "$description": "Space between months shown side by side, the same step as panel padding so the two columns line up."
+    },
+    "header-gap": {
+      "$value": "{space.2}",
+      "$type": "dimension",
+      "$description": "Space between the month title and the weekday row."
+    },
+    "panel-padding": {
+      "$value": "{space.4}",
+      "$type": "dimension",
+      "$description": "Padding inside the popup. The shared popup padding is one step and is too tight for a calendar."
+    }
+  }
+}

package/tokens/semantic/empty.json

@@ -0,0 +1,79 @@
+{
+  "empty": {
+    "$description": "The block a page, pane, table, list or popup shows when there is nothing to show. Sizes only. The media tint is the subtle emphasis level (data-status and data-color recolor it), and the title and description stay in the normal text colors so a long line stays readable. Table, list, popup and pane all read these, so one empty state matches in every place.",
+    "padding-block": {
+      "compact": {
+        "$value": "{space.6}",
+        "$description": "24px above and below a compact empty state. The same room a popup already gives a plain 'No results' line, so the two stay one height."
+      },
+      "standard": {
+        "$value": "{space.10}",
+        "$description": "40px. A pane or a section needs more air than a table row, or the block looks stuck to the content around it."
+      },
+      "spacious": {
+        "$value": "{space.16}",
+        "$description": "64px. A page with nothing else on it. The extra space above keeps the block off the top of the viewport."
+      }
+    },
+    "padding-inline": {
+      "compact": {
+        "$value": "{space.4}",
+        "$description": "16px. Enough that a compact row doesn't touch the cell or popup edge."
+      },
+      "standard": {
+        "$value": "{space.6}",
+        "$description": "24px. A pane can be wide; the inline padding keeps the block off the sides before the description's own cap does."
+      },
+      "spacious": {
+        "$value": "{space.8}",
+        "$description": "32px. A full page, a step wider than a pane."
+      }
+    },
+    "gap": {
+      "compact": {
+        "$value": "{space.3}",
+        "$description": "12px between the icon, the text and the actions in a table row or a popup. Tight, because the row is short."
+      },
+      "standard": {
+        "$value": "{space.4}",
+        "$description": "16px. The stack in a pane: media, then words, then actions."
+      },
+      "spacious": {
+        "$value": "{space.6}",
+        "$description": "24px. A page-sized stack needs the steps to separate, or the circle sits on the title."
+      }
+    },
+    "text-gap": {
+      "compact": {
+        "$value": "{space.1}",
+        "$description": "4px between the title and the description in a compact row. They read as one message."
+      },
+      "standard": {
+        "$value": "{space.1}",
+        "$description": "4px. Same as compact: the description belongs to the title, so it stays close."
+      },
+      "spacious": {
+        "$value": "{space.2}",
+        "$description": "8px. The page title is larger, so the description steps down a little further."
+      }
+    },
+    "media-size": {
+      "standard": {
+        "$value": "{space.12}",
+        "$description": "48px circle around a magnify icon (20px). The icon needs a field, or it reads as a bullet."
+      },
+      "spacious": {
+        "$value": "{space.16}",
+        "$description": "64px circle around a maximize icon (24px). A page can carry a larger mark. Compact has no circle: the icon is icon-size.condense on its own."
+      }
+    },
+    "description-max-width": {
+      "$value": "{measure.narrow}",
+      "$description": "45ch. A description is one sentence. Past a caption's measure it stretches across a wide pane and stops being a sentence."
+    },
+    "actions-gap": {
+      "$value": "{space.2}",
+      "$description": "8px between actions, the same gap a control uses between its icon and its label. The first action is the main one; the rest sit beside it."
+    }
+  }
+}

package/tokens/semantic/field.json

@@ -72,6 +72,10 @@
     "opacity-disabled": {
       "$value": "0.6",
       "$description": "A disabled field fades as a whole, label included."
+    },
+    "affix-color": {
+      "$value": "{text.secondary}",
+      "$description": "A prefix or suffix drawn inside the field (a currency symbol, a unit). Muted so it reads as part of the control, not as the value."
     }
   }
 }

package/tokens/semantic/popup.json

@@ -78,8 +78,8 @@
       "$description": "Space between a group label and its first row."
     },
     "empty-padding-block": {
-      "$value": "{space.6}",
-      "$description": "Room around a 'No results' message, so an empty list doesn't collapse to a sliver."
+      "$value": "{empty.padding-block.compact}",
+      "$description": "Room around a plain 'No results' line. The same padding as a compact empty state, so a sentence and an EmptyState in that slot take the same space. An EmptyState drops this padding and uses its own."
     },
     "min-width": {
       "$value": "200px",

package/tokens/semantic/table.json

@@ -41,6 +41,14 @@
       "$value": "{item.background-selected}",
       "$description": "Selected rows. Same tint as the chosen menu row."
     },
+    "row-current": {
+      "$value": "{surface.tray}",
+      "$description": "The open row beside a detail pane. The tray, a step off the page, so secondary text on it still passes AA in dark. A selected row keeps its own tint, so a checked row and the row you are reading can both show."
+    },
+    "group-header-background": {
+      "$value": "{surface.tray}",
+      "$description": "A group header. The tray, like the column header, so a group reads as chrome rather than another data row."
+    },
     "column-hover": {
       "$value": "{fill.subtle}",
       "$description": "Column under the pointer, when column hover is on. Neutral so it never reads as a selection."

package/tools/brand-builder/builder.js

@@ -578,6 +578,43 @@ function paint(level, dark, palette) {
   return Object.fromEntries(Object.entries(STYLES[style]).map(([part, slot]) => [part, slot === 'transparent' ? 'transparent' : scopeHex(palette ?? color, slot, dark)]));
 }
 
+/**
+ * One week in the sample: a selected start, a range band, today, and a selected end.
+ * accent soft-active, ink and border are the same steps as interactive.tint-active,
+ * text.on-tint-strong and border.accent. The ring width is stroke.thin, which stroke.default points at.
+ */
+function weekRow(dark, accent, slot, text, muted) {
+  const selected = paint('bold', dark);
+  const band = slot(accent, 'soft-active');
+  const onBand = slot(accent, 'ink');
+  const ring = slot(accent, 'border');
+  const ringPx = pxAt(state.result?.files?.stroke?.stroke?.thin?.$value ?? 1, 0) || 1;
+  const days = [
+    { n: '18', kind: 'out' },
+    { n: '19', kind: 'start' },
+    { n: '20', kind: 'mid' },
+    { n: '21', kind: 'today' },
+    { n: '22', kind: 'mid' },
+    { n: '23', kind: 'end' },
+    { n: '24', kind: 'rest' },
+  ];
+  return days.map((day) => {
+    if (day.kind === 'start' || day.kind === 'end') {
+      return `<span class="rday" data-uses="${usesOfBold()}" title="Selected day: bold" style="background:${selected.bg};color:${selected.fg}">${day.n}</span>`;
+    }
+    if (day.kind === 'mid' || day.kind === 'today') {
+      const edge = day.kind === 'today' ? `box-shadow:inset 0 0 0 ${ringPx}px ${ring}` : '';
+      return `<span class="rday mid" data-uses="accent" title="${day.kind === 'today' ? 'Today, inside the range' : 'In range'}" style="background:${band};color:${onBand};${edge}">${day.n}</span>`;
+    }
+    return `<span class="rday" style="color:${day.kind === 'out' ? muted : text}">${day.n}</span>`;
+  }).join('');
+}
+
+function usesOfBold() {
+  const r = withDefaults(state.brand.roles);
+  return `bold ${r.emphasis.bold.color}`;
+}
+
 function rolesScene(dark) {
   const r = withDefaults(state.brand.roles);
   const ch = r.chrome, ac = r.accent;
@@ -614,12 +651,14 @@ function rolesScene(dark) {
         <div class="rb-row">${btn('bold', 'Open', { on: raised })}${btn('standard', 'Edit', { on: raised })}${btn('subtle', 'Copy', { on: raised })}${btn('quiet', 'Archive', { on: raised })}</div></div>
       <div class="rform">
         <span class="ri" data-uses="chrome" style="border-color:${field};color:${muted}">Search surveys</span>
+        <span class="ri" data-uses="chrome" style="border-color:${field};color:${text}"><span style="color:${muted}">$</span>1,250.00</span>
         <span class="ri" data-uses="accent" style="border-color:${field};outline:2px solid ${slot(ac, 'focus')};outline-offset:2px;color:${text}">Focused field</span>
         <span class="rb-row">
           <span class="rcheck-row" data-uses="accent"><i class="rcheck" style="background:${slot(ac, 'solid')};color:${slot(ac, 'on-solid')}">✓</i>Checked</span>
           <span class="rcheck-row" data-uses="accent"><i class="rswitch" style="background:${slot(ac, 'solid')}"><i style="background:${slot(ac, 'on-solid')}"></i></i>On</span>
           <span class="rcheck-row" data-uses="chrome"><i class="rswitch off" style="background:${slot(ch, 'soft-active')}"><i style="background:${page}"></i></i>Off</span>
         </span>
+        <div class="rweek" aria-hidden="true">${weekRow(dark, ac, slot, text, muted)}</div>
       </div>
       <div class="rmenu" data-uses="chrome" style="background:${raised};border-color:${line}">
         <span>Rename</span><span data-uses="${uses('subtle')}" style="background:${hl.bg};color:${hl.fg}" title="Highlighted item: the subtle level">Duplicate</span><span>Move to…</span>
@@ -629,6 +668,12 @@ function rolesScene(dark) {
     ${['error', 'success'].filter((p) => state.brand.color.palettes[p]).map((p) => `<div class="ralert" data-uses="palette" style="background:${slot(p, 'soft')};color:${slot(p, 'on-soft')};border-color:${slot(p, 'border-subtle')}">
       <b>${p === 'error' ? 'Upload failed' : 'Saved'}</b> ${p === 'error' ? 'The file is over 20 MB.' : 'Your changes are live.'}</div>`).join('')}
     <div class="rladder">${tag('Emphasis ladder')}<div class="rb-row">${LEVELS.map((l) => btn(l, l, { rate: true })).join('')}</div></div>
+    <div class="rladder">${tag('Status badges, subtle')}<div class="rb-row">${['info', 'success', 'warning', 'error'].filter((p) => state.brand.color.palettes[p]).map((p) => { const e = paint('subtle', dark, p); return `<span class="rbadge" data-uses="${uses('subtle')} palette ${p}" title="subtle ${p}" style="background:${e.bg};color:${e.fg};border-color:${e.border}">${esc(p)}</span>`; }).join('')}</div></div>
+    <div class="rempty" data-uses="chrome" style="color:${text}">
+      <i data-uses="${uses('subtle')}" style="background:${hl.bg};color:${hl.fg}" title="Empty state media: the subtle level"><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="currentColor" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5v-4.99h3.42c.77 1.76 2.54 3 4.58 3s3.81-1.24 4.58-3H19V19z"/></svg></i>
+      <b>No surveys yet</b>
+      ${btn('bold', 'New survey')}
+    </div>
     <div class="rladder">${tag('Bold in every palette (data-color)')}<div class="rb-row">${spots.map((p) => btn('bold', p, { palette: p, rate: true })).join('')}</div></div>
   </div>`;
 }

package/tools/brand-builder/index.html

@@ -212,6 +212,12 @@ body[data-vision="achromat"] .preview { filter: url(#sim-achromat); }
 .rb-wrap { display: grid; gap: 2px; justify-items: center; }
 .rb-wrap small { font-size: 0.72rem; font-family: var(--mono); }
 .rb { display: inline-block; padding: 6px 14px; border: 1px solid; border-radius: 6px; font-weight: 600; white-space: nowrap; }
+.rbadge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border: 1px solid; border-radius: 999px; font: 500 0.75rem/1 var(--body); white-space: nowrap; }
+.rweek { display: grid; grid-template-columns: repeat(7, 28px); gap: 2px; }
+.rday { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; font: 600 0.75rem/1 var(--body); box-sizing: border-box; }
+.rday.mid { border-radius: 0; }
+.rempty { display: grid; justify-items: center; gap: 8px; padding: 8px 0; text-align: center; }
+.rempty i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; font: 600 12px/1 var(--body); }
 .ri { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; min-width: 110px; border: 1px solid; border-radius: 6px; }
 .rcheck { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; font: normal 600 11px/1 var(--body); }
 .rtabs { display: flex; gap: 18px; border-bottom: 1px solid; }