@scattered-light/loomiere 0.3.0 → 0.4.1

package/tokens/semantic/typography.json

@@ -1,7 +1,7 @@
 {
   "font": {
     "$description": "Text styles for the condense, base, magnify and minimize tiers. Each style has its parts (family, size, weight, line height, letter spacing) and a -font shorthand that combines them.",
-    "base": {
+    "body-base": {
       "$type": "typography",
       "$value": {
         "fontFamily": "{font-family.body}",
@@ -12,7 +12,7 @@
       },
       "$description": "Body copy in the base tier, the default UI and body text."
     },
-    "base-selected": {
+    "selected-base": {
       "$type": "typography",
       "$value": {
         "fontFamily": "{font-family.body}",
@@ -23,7 +23,7 @@
       },
       "$description": "The selected or current item in the base tier (the default UI and body text): selected tabs and toggles, the current nav item or page. Base body text at semibold, so selection reads without changing size."
     },
-    "base-label": {
+    "label-base": {
       "$type": "typography",
       "$value": {
         "fontFamily": "{font-family.body}",
@@ -34,12 +34,12 @@
       },
       "$description": "Form labels in the base tier, the default UI and body text."
     },
-    "base-link": {
+    "link-base": {
       "$type": "typography",
-      "$value": "{font.base}",
+      "$value": "{font.body-base}",
       "$description": "Links in the base tier. The same type as base body text: a link stands out by color and underline, not by its type."
     },
-    "base-subtitle": {
+    "subtitle-base": {
       "$type": "typography",
       "$value": {
         "fontFamily": "{font-family.body}",
@@ -50,7 +50,7 @@
       },
       "$description": "Subtitles in the base tier, the default UI and body text."
     },
-    "base-trigger": {
+    "trigger-base": {
       "$type": "typography",
       "$value": {
         "fontFamily": "{font-family.body}",
@@ -61,7 +61,18 @@
       },
       "$description": "Buttons and triggers in the base tier, the default UI and body text."
     },
-    "code": {
+    "title-base": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.display}",
+        "fontSize": "{font-size.md}",
+        "fontWeight": "{font-weight.semibold}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.md}"
+      },
+      "$description": "Titles in the base tier: a toast, an accordion row, a list item heading. Titles use the display family; the tier sets the size."
+    },
+    "code-condense": {
       "$type": "typography",
       "$value": {
         "fontFamily": "{font-family.mono}",
@@ -72,7 +83,7 @@
       },
       "$description": "Code uses the mono family so characters line up."
     },
-    "condense": {
+    "body-condense": {
       "$type": "typography",
       "$value": {
         "fontFamily": "{font-family.body}",
@@ -83,7 +94,7 @@
       },
       "$description": "Body copy in the condense tier, dense UI text (tables, secondary labels)."
     },
-    "condense-trigger": {
+    "trigger-condense": {
       "$type": "typography",
       "$value": {
         "fontFamily": "{font-family.body}",
@@ -94,7 +105,7 @@
       },
       "$description": "Buttons and triggers in the condense tier (dense UI): condense body text at medium, like base-trigger one tier down."
     },
-    "condense-selected": {
+    "selected-condense": {
       "$type": "typography",
       "$value": {
         "fontFamily": "{font-family.body}",
@@ -105,12 +116,12 @@
       },
       "$description": "The selected or current item in the condense tier (dense UI text): selected tabs and toggles, the current nav item or page. Condense body text at semibold, so selection reads without changing size."
     },
-    "condense-link": {
+    "link-condense": {
       "$type": "typography",
-      "$value": "{font.condense}",
+      "$value": "{font.body-condense}",
       "$description": "Links in the condense tier. The same type as condense body text: a link stands out by color and underline, not by its type."
     },
-    "condense-subtitle": {
+    "subtitle-condense": {
       "$type": "typography",
       "$value": {
         "fontFamily": "{font-family.body}",
@@ -121,7 +132,7 @@
       },
       "$description": "Subtitles in the condense tier, dense UI text (tables, secondary labels)."
     },
-    "condense-subtitle-label": {
+    "eyebrow-condense": {
       "$type": "typography",
       "$value": {
         "fontFamily": "{font-family.body}",
@@ -135,7 +146,18 @@
         "sl.text-transform": "uppercase"
       }
     },
-    "magnify": {
+    "title-condense": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.display}",
+        "fontSize": "{font-size.sm}",
+        "fontWeight": "{font-weight.semibold}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.sm}"
+      },
+      "$description": "Titles in the condense tier: group headers in tables, menus and dense panels. Titles use the display family; the tier sets the size."
+    },
+    "body-magnify": {
       "$type": "typography",
       "$value": {
         "fontFamily": "{font-family.body}",
@@ -146,7 +168,7 @@
       },
       "$description": "Body copy in the magnify tier, emphasized body text (lead paragraphs)."
     },
-    "magnify-trigger": {
+    "trigger-magnify": {
       "$type": "typography",
       "$value": {
         "fontFamily": "{font-family.body}",
@@ -157,7 +179,18 @@
       },
       "$description": "Buttons and triggers in the magnify tier (emphasized, larger UI): magnify body text at medium, like base-trigger one tier up."
     },
-    "minimize": {
+    "title-magnify": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.display}",
+        "fontSize": "{font-size.lg}",
+        "fontWeight": "{font-weight.semibold}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.md}"
+      },
+      "$description": "Titles in the magnify tier: popovers, cards and fieldsets. Titles use the display family; the tier sets the size."
+    },
+    "body-minimize": {
       "$type": "typography",
       "$value": {
         "fontFamily": "{font-family.body}",
@@ -168,7 +201,7 @@
       },
       "$description": "Body copy in the minimize tier, the smallest functional text (captions, fine print)."
     },
-    "minimize-trigger": {
+    "trigger-minimize": {
       "$type": "typography",
       "$value": {
         "fontFamily": "{font-family.body}",
@@ -179,7 +212,7 @@
       },
       "$description": "Buttons and triggers in the minimize tier (the smallest UI): minimize body text at medium, like base-trigger one tier down."
     },
-    "minimize-selected": {
+    "selected-minimize": {
       "$type": "typography",
       "$value": {
         "fontFamily": "{font-family.body}",
@@ -190,12 +223,12 @@
       },
       "$description": "The selected or current item in the minimize tier (the smallest functional text): selected tabs and toggles, the current nav item or page. Minimize body text at semibold, so selection reads without changing size."
     },
-    "minimize-link": {
+    "link-minimize": {
       "$type": "typography",
-      "$value": "{font.minimize}",
+      "$value": "{font.body-minimize}",
       "$description": "Links in the minimize tier. The same type as minimize body text: a link stands out by color and underline, not by its type."
     },
-    "minimize-subtitle": {
+    "subtitle-minimize": {
       "$type": "typography",
       "$value": {
         "fontFamily": "{font-family.body}",
@@ -206,7 +239,7 @@
       },
       "$description": "Subtitles in the minimize tier, the smallest functional text (captions, fine print)."
     },
-    "minimize-subtitle-label": {
+    "eyebrow-minimize": {
       "$type": "typography",
       "$value": {
         "fontFamily": "{font-family.body}",
@@ -220,7 +253,7 @@
         "sl.text-transform": "uppercase"
       }
     },
-    "maximize-2xl": {
+    "title-amplify": {
       "$type": "typography",
       "$value": {
         "fontFamily": "{font-family.display}",
@@ -229,20 +262,9 @@
         "letterSpacing": "{letter-spacing.normal}",
         "lineHeight": "{line-height.2xl}"
       },
-      "$description": "Display text at 2xl, for headings and hero copy."
+      "$description": "Titles in the amplify tier: dialogs, drawers and page sections. Titles use the display family; the tier sets the size."
     },
-    "maximize-3xl": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "{font-family.display}",
-        "fontSize": "{font-size.3xl}",
-        "fontWeight": "{font-weight.semibold}",
-        "letterSpacing": "{letter-spacing.normal}",
-        "lineHeight": "{line-height.3xl}"
-      },
-      "$description": "Display text at 3xl, for headings and hero copy."
-    },
-    "maximize-4xl": {
+    "title-maximize": {
       "$type": "typography",
       "$value": {
         "fontFamily": "{font-family.display}",
@@ -251,62 +273,7 @@
         "letterSpacing": "{letter-spacing.normal}",
         "lineHeight": "{line-height.4xl}"
       },
-      "$description": "Display text at 4xl, for headings and hero copy."
-    },
-    "maximize-lg": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "{font-family.display}",
-        "fontSize": "{font-size.lg}",
-        "fontWeight": "{font-weight.semibold}",
-        "letterSpacing": "{letter-spacing.normal}",
-        "lineHeight": "{line-height.md}"
-      },
-      "$description": "Display text at lg, for headings and hero copy."
-    },
-    "maximize-md": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "{font-family.display}",
-        "fontSize": "{font-size.md}",
-        "fontWeight": "{font-weight.semibold}",
-        "letterSpacing": "{letter-spacing.normal}",
-        "lineHeight": "{line-height.md}"
-      },
-      "$description": "Display text at md, for headings and hero copy."
-    },
-    "maximize-sm": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "{font-family.display}",
-        "fontSize": "{font-size.sm}",
-        "fontWeight": "{font-weight.semibold}",
-        "letterSpacing": "{letter-spacing.normal}",
-        "lineHeight": "{line-height.sm}"
-      },
-      "$description": "Display text at sm, for headings and hero copy."
-    },
-    "maximize-xl": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "{font-family.display}",
-        "fontSize": "{font-size.xl}",
-        "fontWeight": "{font-weight.semibold}",
-        "letterSpacing": "{letter-spacing.normal}",
-        "lineHeight": "{line-height.md}"
-      },
-      "$description": "Display text at xl, for headings and hero copy."
-    },
-    "maximize-xs": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "{font-family.display}",
-        "fontSize": "{font-size.xs}",
-        "fontWeight": "{font-weight.semibold}",
-        "letterSpacing": "{letter-spacing.normal}",
-        "lineHeight": "{line-height.xs}"
-      },
-      "$description": "Display text at xs, for headings and hero copy."
+      "$description": "Titles in the maximize tier: the page head. Titles use the display family; the tier sets the size."
     }
   }
 }

package/tools/brand-builder/builder.js

@@ -11,7 +11,7 @@ import { buildPrimitives } from '../../generator/brand.mjs';
 import { checkDataColors, DATA_CONTRAST, nudgeDataColor, VISIONS } from '../../generator/data-colors.mjs';
 import { VISION_THEMES, visionColors } from '../../generator/vision.mjs';
 import { formatBrand } from '../../generator/format-brand.mjs';
-import { CONCEPTS, conceptModes, defaultPick, LEVELS, pickRef, SLOTS, stepRef, STYLES, withDefaults } from '../../generator/roles.mjs';
+import { CONCEPTS, conceptModes, defaultPick, LEVELS, pickRef, SLOTS, STATUSES, stepRef, STYLES, withDefaults } from '../../generator/roles.mjs';
 
 const BRAND_ROLES = ['neutral', 'primary', 'secondary', 'tertiary', 'quaternary'];
 const ALERT_ROLES = ['success', 'warning', 'error', 'info'];
@@ -238,7 +238,7 @@ function editorsHtml() {
     ''));
 
   out.push(`<section class="band" id="vision"><div class="band-head"><h2>Color vision</h2>
-    <p class="muted">Each theme redesigns this brand's colors for one kind of color blindness, moving each color only as far as it needs to so colors that look different to most people don't blur together. Contrast steps stay the same. Open a theme to tune any color. A page turns one on with <code>data-vision="deuteranopia"</code> on its root element.</p></div>
+    <p class="muted">Each theme redesigns this brand's colors for one kind of color blindness, moving each color only as far as it needs to so colors that look different to most people don't blur together. Contrast steps stay the same. Open a theme to tune any color. Each is a theme of its own: a page turns one on with <code>data-theme="deuteranopia"</code> on its root element.</p></div>
     <div class="row"><label class="toggle"><input type="checkbox" id="vision-seen"${state.visionSeen ? ' checked' : ''}> Show each theme as people with that vision see it</label></div>
     <div class="preview" id="pv-vision"></div>
     ${visionDetailHtml()}</section>`);
@@ -248,6 +248,7 @@ function editorsHtml() {
   const chromeOpts = pals.filter(([, p]) => p.contrast === 'neutral').map(([n]) => [n, n]);
   const accentOpts = pals.filter(([, p]) => p.contrast !== 'neutral').map(([n]) => [n, n]);
   const colorOpts = [['accent', `accent (${r.accent})`], ['chrome', `chrome (${r.chrome})`], ...pals.map(([n]) => [n, n])];
+  const pairOpts = [['', 'Automatic'], ...Object.keys(b.color.pairs ?? {}).map((n) => [n, n])];
   const styleOpts = Object.keys(STYLES).map((v) => [v, v]);
   out.push(band('pairs', 'Pairs', 'Named background and text combinations. Pick them in the pair lab (<code>loomiere lab</code>); here you can see whether palette changes still keep them at AA.', null,
     '<div class="preview" id="pv-pairs"></div>'));
@@ -313,6 +314,9 @@ function editorsHtml() {
      <div class="panel"><h3>Emphasis ladder</h3>
        ${LEVELS.map((level) => `<div class="row"><b class="level">${level}</b>${selectIn(`roles.emphasis.${level}.style`, r.emphasis[level].style, styleOpts, 'Style')}${selectIn(`roles.emphasis.${level}.color`, r.emphasis[level].color, colorOpts, 'Color')}</div>`).join('')}
        <small class="muted">In code: <code>&lt;Button emphasis="subtle"&gt;</code>, or <code>data-emphasis="subtle"</code> on any element. Add <code>palette="error"</code> (<code>data-color</code>) to repaint a level.</small></div>
+     <div class="panel"><h3>Statuses</h3>
+       ${STATUSES.filter((st) => st === 'default' || b.color.palettes[st]).map((st) => `<div class="row"><b class="level">${st}</b>${LEVELS.map((level) => selectIn(`roles.status.${st}.${level}`, r.status?.[st]?.[level] ?? '', pairOpts, level)).join('')}</div>`).join('')}
+       <small class="muted">Automatic is the level's style in the status's palette (for default, the ladder above). Pick a brand pair to have it stand in for that level. In code: <code>data-status="warning"</code> on any element.</small></div>
      <div class="panel"><h3>What uses what</h3><p class="muted">Each part of the sample screen reads one role. Change a setting and the parts that use it light up.</p>
        <div class="palette-strip" id="pv-strip"></div>
        <div class="row"><button class="btn small" type="button" data-act="step" data-step="brand">Adjust brand colors</button></div></div>`,
@@ -533,12 +537,14 @@ function visionDetailHtml() {
   };
   const head = '<thead><tr><th></th><th>Brand · as seen</th><th>Theme · as seen</th><th>Color</th><th></th></tr></thead>';
   const paletteRows = Object.entries(g.keys).map(([r, hex]) => row(c.palettes[r].label ? `${c.palettes[r].label} (${r})` : r, 'keys', r, g.brandKeys[r], hex));
-  const dataRows = g.data.map(([n, hex], i) => row(n, 'data', n, c.data[i][1], hex));
+  const brandData = Object.fromEntries(c.data);
+  const dataRows = g.data.map(([n, hex], i) =>
+    row(n, 'data', n, brandData[n], hex).replace('<th scope="row">', `<th scope="row">${i ? `<button class="icon-btn" type="button" data-act="vision-data-up" data-theme="${theme}" data-i="${i}" aria-label="Move ${esc(n)} up in ${name}">↑</button>` : ''}`));
   return `<div class="panel vision-detail"><div class="row"><h3>${name} colors</h3>
       <button class="btn small" type="button" data-act="vision-open" data-theme="${theme}">Close</button></div>
     <small class="muted">Each pair of swatches is the color, then how it looks with ${name.toLowerCase()}. Change a color to pin it; the others move to make room. A palette's color is its most colorful key, and the whole ramp follows it.</small>
     <div class="table-wrap"><table class="vtable">${head}<tbody><tr><td colspan="5" class="vgroup">Palettes</td></tr>${paletteRows.join('')}
-      <tr><td colspan="5" class="vgroup">Data colors</td></tr>${dataRows.join('')}</tbody></table></div></div>`;
+      <tr><td colspan="5" class="vgroup">Data colors, in this theme's series order (↑ moves one up; saved as <code>dataOrder</code>)</td></tr>${dataRows.join('')}</tbody></table></div></div>`;
 }
 
 function pairsHtml() {
@@ -960,6 +966,16 @@ document.addEventListener('change', (e) => {
     set(real, el.checked ? state.brand.color.ink : undefined);
     return renderEditors();
   }
+  if (bind.startsWith('roles.status.')) {
+    // Automatic is the absence of a pick, so it leaves the file.
+    set(bind, el.value || undefined);
+    const [, , st] = bind.split('.');
+    const picks = state.brand.roles?.status;
+    if (picks?.[st] && !Object.values(picks[st]).some(Boolean)) delete picks[st];
+    if (picks && !Object.keys(picks).length) delete state.brand.roles.status;
+    renderEditors();
+    return;
+  }
   if (bind.startsWith('roles.')) {
     set(bind, readInput(el));
     renderEditors();
@@ -1033,6 +1049,19 @@ document.addEventListener('click', (e) => {
       if (!Object.keys(v).length) delete state.brand.color.vision;
       break;
     }
+    case 'vision-data-up': {
+      const { theme } = b.dataset;
+      const c = state.brand.color;
+      const order = visionColors(c)[theme].data.map(([n]) => n);
+      [order[i - 1], order[i]] = [order[i], order[i - 1]];
+      c.vision ??= {};
+      c.vision[theme] ??= {};
+      if (order.join() === c.data.map(([n]) => n).join()) delete c.vision[theme].dataOrder;
+      else c.vision[theme].dataOrder = order;
+      if (!Object.keys(c.vision[theme]).length) delete c.vision[theme];
+      if (!Object.keys(c.vision).length) delete c.vision;
+      break;
+    }
     case 'measure-fonts': return measureFonts().then(renderEditors);
     case 'pins-off': state.usePins = false; $('pins').checked = false; return renderPreviews();
     case 'revert': state.brand = JSON.parse(state.savedText); delete state.brand.$schema; delete state.brand.name; break;