@scattered-light/loomiere 0.7.1 → 0.8.0

package/build/build-tokens.mjs

@@ -465,11 +465,14 @@ StyleDictionary.registerFormat({
  * Text styles are written as one DTCG typography token each (tokens/semantic/typography.json).
  * CSS can't use a composite, so this expands each into its parts plus a `font` shorthand:
  *   font.body-base → font.body-base.font, .font-family, .font-size, .font-weight, .line-height,
- *               .letter-spacing (and .text-transform when $extensions["sl.text-transform"] is set)
+ *               .letter-spacing (and .text-transform when $extensions["sl.text-transform"] is set,
+ *               .font-variant-numeric when $extensions["sl.font-variant-numeric"] is)
  * so --sl-font-body-base-font-size and friends exist for components. A text style whose value is
  * another text style ("{font.body-base}") takes that style's parts.
  */
 const TEXT_PARTS = { fontFamily: 'font-family', fontSize: 'font-size', fontWeight: 'font-weight', lineHeight: 'line-height', letterSpacing: 'letter-spacing' };
+/** Optional parts a text style sets through $extensions["sl.<part>"]: uppercase labels, tabular figures. */
+const EXTRA_PARTS = ['text-transform', 'font-variant-numeric'];
 export const TEXT_STYLE_TYPE = 'typography';
 
 export function expandTextStyles(tokens) {
@@ -499,11 +502,13 @@ export function expandTextStyles(tokens) {
         if (style.$value[prop] === undefined) throw new Error(`Text style ${name} has no ${prop}`);
         group[part] = { $value: style.$value[prop], $description: `${part} of ${name}.` };
       }
-      const transform = child.$extensions?.['sl.text-transform'] ?? style.$extensions?.['sl.text-transform'];
-      if (transform) group['text-transform'] = { $value: transform, $description: `text-transform of ${name}.` };
+      for (const part of EXTRA_PARTS) {
+        const value = child.$extensions?.[`sl.${part}`] ?? style.$extensions?.[`sl.${part}`];
+        if (value) group[part] = { $value: value, $description: `${part} of ${name}.` };
+      }
       group.font = {
         $value: `{${name}.font-weight} {${name}.font-size} / {${name}.line-height} {${name}.font-family}`,
-        $description: `${what} As a font shorthand; letter-spacing and text-transform are separate.`,
+        $description: `${what} As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate.`,
       };
       // Parts keep the file the style came from, which says which layer they belong to.
       for (const [part, token] of Object.entries(group)) if (!part.startsWith('$')) Object.assign(token, { filePath: child.filePath, isSource: child.isSource });
@@ -549,10 +554,10 @@ function textStyleBlocks() {
   const styles = Object.entries(font).filter(([name, t]) => !name.startsWith('$') && t.$type === TEXT_STYLE_TYPE);
   return styles.map(([name, t]) => {
     const v = (part) => `var(${varName(['font', name, part])})`;
-    const transform = t.$extensions?.['sl.text-transform'] ?? (typeof t.$value === 'string' && font[t.$value.slice(1, -1).split('.')[1]]?.$extensions?.['sl.text-transform']);
+    const extra = (part) => t.$extensions?.[`sl.${part}`] ?? (typeof t.$value === 'string' && font[t.$value.slice(1, -1).split('.')[1]]?.$extensions?.[`sl.${part}`]);
     // Longhands, not the font shorthand: the shorthand would also reset font-feature-settings
     // and the other font properties the page sets once on body.
-    const parts = ['font-family', 'font-size', 'font-weight', 'line-height', 'letter-spacing', ...(transform ? ['text-transform'] : [])];
+    const parts = ['font-family', 'font-size', 'font-weight', 'line-height', 'letter-spacing', ...EXTRA_PARTS.filter(extra)];
     const lines = parts.map((part) => `${part}: ${v(part)};`);
     return `/* ${t.$description ?? name} */\n.text-style-${name} {\n${indent(lines.join('\n'), 2)}\n}`;
   });

package/exporters/design-system.mjs

@@ -345,8 +345,8 @@ function brandBook({ theme, brand, byPath, cssName, usageOf, tokens, tiers, styl
       '',
       '`window.Loomiere` holds two kinds of component:',
       '',
-      `- **Wrappers** put their own classes on, so use them bare: ${['Button', 'Input', 'Field', 'Fieldset', 'Form', 'NavigationMenu', 'Select', 'NumberField', 'OTPField', 'Autocomplete', 'Combobox', 'Checkbox', 'Radio', 'CheckboxGroup', 'Toggle', 'ToggleGroup', 'Dialog', 'AlertDialog', 'Meter', 'Progress', 'Slider', 'Menu', 'ContextMenu', 'Menubar', 'Popover', 'PreviewCard', 'Tooltip', 'Drawer', 'Accordion', 'Collapsible', 'Tabs', 'Switch', 'Toast', 'Avatar', 'Toolbar', 'ScrollArea', 'Separator', 'Badge', 'DatePicker', 'MoneyField', 'Splitter', 'ListDetail', 'EmptyState', 'DataTable', 'DataList', 'CollectionToolbar', 'CollectionPagination', 'EditableList'].filter(has).map((n) => `\`Loomiere.${n}\``).join(', ')}. \`Loomiere.Button\` also takes \`emphasis\` (\`bold|standard|subtle|quiet\`) and \`palette\` props, and a Button holding only an icon draws itself square (it sets \`data-icon-only\`). Wrapped parts that are buttons (\`Dialog.Trigger\`, \`Menu.Trigger\`, \`Toolbar.Button\`, \`Drawer.Close\`...) take the same \`emphasis\` and \`palette\` props and draw square the same way. \`Popover.Trigger\`, \`Tooltip.Trigger\`, \`Select.Trigger\` and \`Dialog.Close\` become Buttons only when they set \`emphasis\`, \`palette\` or \`className="Button"\`. A plain \`.Button\` on a bare part is drawn square when it has an \`aria-label\` and a single icon inside, or when you set \`data-icon-only\` on it. \`Loomiere.Badge\` takes the same \`emphasis\` and \`palette\` props, plus \`status\`, \`size\` and \`dot\`.`,
-      '- **Table, Badge, DatePicker, MoneyField, Splitter, ListDetail, EmptyState, DataTable, DataList, CollectionToolbar, CollectionPagination and EditableList are Loomiere components**, not Base UI parts. Table is plain HTML for a static table or a report: use the classes in its stylesheet. Badge is `Loomiere.Badge`. DatePicker is `Loomiere.DatePicker`; `Loomiere.Calendar` is the month grid on its own and `Loomiere.DatePresets` is the quick-selection list. MoneyField is `Loomiere.MoneyField`: an amount of money, stored as minor units. Splitter is `Loomiere.Splitter`. ListDetail is `Loomiere.ListDetail`. EmptyState is `Loomiere.EmptyState`. DataTable, DataList, CollectionToolbar and CollectionPagination come from `@scattered-light/loomiere-base-ui/custom/collection` and need `@tanstack/react-table` installed. EditableList comes from the package root or `./custom`.',
+      `- **Wrappers** put their own classes on, so use them bare: ${['Button', 'Input', 'Field', 'Fieldset', 'Form', 'NavigationMenu', 'Select', 'NumberField', 'OTPField', 'Autocomplete', 'Combobox', 'Checkbox', 'Radio', 'CheckboxGroup', 'Toggle', 'ToggleGroup', 'Dialog', 'AlertDialog', 'Meter', 'Progress', 'Slider', 'Menu', 'ContextMenu', 'Menubar', 'Popover', 'PreviewCard', 'Tooltip', 'Drawer', 'Accordion', 'Collapsible', 'Tabs', 'Switch', 'Toast', 'Avatar', 'Toolbar', 'ScrollArea', 'Separator', 'Badge', 'DatePicker', 'MoneyField', 'Splitter', 'ListDetail', 'EmptyState', 'DataTable', 'DataList', 'CollectionToolbar', 'CollectionPagination', 'EditableList', 'Sheet', 'StatFigure', 'DescriptionList'].filter(has).map((n) => `\`Loomiere.${n}\``).join(', ')}. \`Loomiere.Button\` also takes \`emphasis\` (\`bold|standard|subtle|quiet\`) and \`palette\` props, and a Button holding only an icon draws itself square (it sets \`data-icon-only\`). Wrapped parts that are buttons (\`Dialog.Trigger\`, \`Menu.Trigger\`, \`Toolbar.Button\`, \`Drawer.Close\`...) take the same \`emphasis\` and \`palette\` props and draw square the same way. \`Popover.Trigger\`, \`Tooltip.Trigger\`, \`Select.Trigger\` and \`Dialog.Close\` become Buttons only when they set \`emphasis\`, \`palette\` or \`className="Button"\`. A plain \`.Button\` on a bare part is drawn square when it has an \`aria-label\` and a single icon inside, or when you set \`data-icon-only\` on it. \`Loomiere.Badge\` takes the same \`emphasis\` and \`palette\` props, plus \`status\`, \`size\` and \`dot\`.`,
+      '- **Table, Badge, DatePicker, MoneyField, Splitter, ListDetail, EmptyState, DataTable, DataList, CollectionToolbar, CollectionPagination, EditableList, Sheet, StatFigure and DescriptionList are Loomiere components**, not Base UI parts. Table is plain HTML for a static table or a report: use the classes in its stylesheet. Badge is `Loomiere.Badge`. DatePicker is `Loomiere.DatePicker`; `Loomiere.Calendar` is the month grid on its own and `Loomiere.DatePresets` is the quick-selection list. MoneyField is `Loomiere.MoneyField`: an amount of money, stored as minor units. Splitter is `Loomiere.Splitter`. ListDetail is `Loomiere.ListDetail`. EmptyState is `Loomiere.EmptyState`. DataTable, DataList, CollectionToolbar and CollectionPagination come from `@scattered-light/loomiere-base-ui/custom/collection` and need `@tanstack/react-table` installed. EditableList, Sheet, StatFigure and DescriptionList (with `Loomiere.DescriptionItem`) come from the package root or `./custom`.',
       '',
       '`Loomiere.Base` holds the bare Base UI parts for the wrappers too (`Loomiere.Base.Button`), for when you need the part without its classes.',
       '',
@@ -396,6 +396,9 @@ function brandBook({ theme, brand, byPath, cssName, usageOf, tokens, tiers, styl
         ['EditableList', 'Repeating form rows people add, edit and remove: line items, allocations.'],
         ['CollectionToolbar', 'Search, tabs, filters and the selection bar for a DataTable or a DataList.'],
         ['CollectionPagination', 'Which page of a long list you are on. It also works without a collection.'],
+        ['Sheet', 'Frame a section of a working page (open items, a profile, periods) with a ruled top and an optional tab label. A table or list inside runs edge to edge.'],
+        ['StatFigure', 'Lead a page with one figure that matters (a balance, a count to act on), with a caps label and a caption. Give a final total the double underline.'],
+        ['DescriptionList', 'Show label and value pairs, such as a profile. variant="leader" runs dotted leaders to values at the end of the row, as on a working paper.'],
         ['EmptyState', 'Don\'t use it for a message about something that just happened (use Toast) or a warning above content that still shows (use a notice or an inline alert).'],
         ['Progress', 'Show how far a task has got.'],
         ['Meter', 'Show a measured amount within known limits, such as storage used.'],

package/exporters/tailwind.mjs

@@ -106,7 +106,7 @@ export default {
     // class sets family, size, weight, line height and letter spacing together.
     const styles = new Map();
     for (const t of theme.tokens) {
-      const m = t.path.match(/^font\.([\w-]+)\.(font-family|font-size|font-weight|line-height|letter-spacing|text-transform)$/);
+      const m = t.path.match(/^font\.([\w-]+)\.(font-family|font-size|font-weight|line-height|letter-spacing|text-transform|font-variant-numeric)$/);
       if (m) (styles.get(m[1]) ?? styles.set(m[1], []).get(m[1])).push(`  ${m[2]}: var(${t.name});`);
     }
     const utilities = [...styles].map(([style, decls]) => `@utility text-${style} {\n${decls.join('\n')}\n}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scattered-light/loomiere",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Turns a small brand file into a full design token theme: OKLCH color ramps, a type scale, light, dark and high-contrast modes, plus Tailwind, MUI, Chakra, AG Grid and Figma exports.",
   "keywords": ["design-tokens", "theme", "style-dictionary", "dtcg", "oklch", "base-ui", "ag-grid", "tailwind"],
   "repository": {

package/tokens/README.md

@@ -72,6 +72,27 @@ In CSS a look is `data-look="<name>"` on the root element, next to `data-theme`.
 
 Mojave's brand file has one: `classic`, the look the brand had before.
 
+## Working papers and square corners
+
+Accounting and reporting apps often want the look of a working paper: ruled tops, totals with single and double rules, caps labels and figures that line up. Every piece is opt-in, so a brand that sets none of these looks exactly as before.
+
+- **The rule.** `rule.width` (0 by default) and `rule.color` (`border.strong` by default) in `tokens/semantic/rule.json`. With a width above 0, tables, data lists (each card, in the cards variant) and drawers swap their top border for a heavier line in the rule color: `"tokens": { "rule.width": "{stroke.medium}", "rule.color": "{text.primary}" }` gives an ink rule. The Sheet component always has its own rule (`sheet.rule-width`), in the same color.
+- **Totals.** `<tr data-total="subtotal">` in a `.Table` draws a single rule above the row; `data-total="grand"` adds a double rule under it. `data-rule="none"` on a label cell keeps the rules under the figures only. DataTable's `totalStyle` prop does the same for its footer. Colors and widths are `table.total-rule-color`, `table.subtotal-rule-width` and `table.grand-total-rule-width` (a CSS double border, so keep it at 3px or more).
+- **Text styles.** `font.caps-condense` is a caps label (uppercase, semibold, `letter-spacing.caps` 0.08em). `font.figures-base` and `font.figures-condense` are figures: the mono family with tabular numbers. A text style can set `$extensions["sl.font-variant-numeric"]` the way it sets `sl.text-transform`; the build writes it as its own part (`--sl-font-figures-base-font-variant-numeric`) and into the `.text-style-*` class and the `@sl-pattern text-*` pattern.
+
+**Square corners.** Every component reads its corners from a radius token, so four picks square buttons, tables, popups, surfaces and dialogs without touching a component (badges, switches, radios and avatars stay round on `radius.pill`; checkboxes keep `radius.box`):
+
+```json
+"tokens": {
+  "button.radius": "{radius.sm}",
+  "radius.surface": "{radius.sm}",
+  "radius.chrome": "{radius.sm}",
+  "radius.modal": "{radius.sm}"
+}
+```
+
+`button.radius` points at `radius.pill` by default because buttons are pills; `radius.surface` covers tables, data lists, popups, accordions, sheets, toggle groups and code blocks; `radius.chrome` covers toolbars, menubars, tooltips and toggles; `radius.modal` covers dialogs and drawers. Point them at `{radius.none}` for fully square corners. A look can make the same picks.
+
 ## Roles: chrome, accent and the emphasis ladder
 
 Semantic and component tokens never name a brand color. They say `color.chrome.*` (surfaces, text, borders) or `color.accent.*` (links, focus, the loudest actions), and the brand file's `roles` decides which palettes those are:
@@ -120,7 +141,7 @@ The universal outputs are the CSS variables (`tokens.css`, works with any framew
 
 ## Text styles and utilities
 
-Each text style is one `typography` token in `semantic/typography.json`, named role first, then tier: `body-base`, `label-base`, `trigger-condense`, `eyebrow-condense`, `title-magnify`. The role is the job (body, label, trigger, selected, link, subtitle, eyebrow, title, code); the tier sets the size (minimize, condense, base, magnify, amplify, maximize). Titles use the display family: `title-amplify` for dialogs and sections, `title-maximize` for the page head. A style can be another style (`"link-base": "{font.body-base}"`) when only color sets it apart. The build expands every style into the CSS variables components use, `--sl-font-<style>-font` (shorthand), `-font-family`, `-font-size`, `-font-weight`, `-line-height`, `-letter-spacing` and, for uppercase styles, `-text-transform`.
+Each text style is one `typography` token in `semantic/typography.json`, named role first, then tier: `body-base`, `label-base`, `trigger-condense`, `eyebrow-condense`, `title-magnify`. The role is the job (body, label, trigger, selected, link, subtitle, eyebrow, caps, title, code, figures); the tier sets the size (minimize, condense, base, magnify, amplify, maximize). Titles use the display family: `title-amplify` for dialogs and sections, `title-maximize` for the page head. A style can be another style (`"link-base": "{font.body-base}"`) when only color sets it apart. The build expands every style into the CSS variables components use, `--sl-font-<style>-font` (shorthand), `-font-family`, `-font-size`, `-font-weight`, `-line-height`, `-letter-spacing` and, for uppercase styles, `-text-transform`, and for figures, `-font-variant-numeric`.
 
 `loomiere build` also writes the utility classes into `<theme>/utilities.css`, so they always match the tokens: `.text-style-<style>` for every text style, `.icon-<tier>` for every icon size, `.focus-ring` and `.focus-ring-inset`, and `.hide-on-mobile|tablet|desktop` from the breakpoints.
 

package/tokens/component/description-list.json

@@ -0,0 +1,49 @@
+{
+  "description-list": {
+    "$description": "DescriptionList: label and value pairs, such as an entity's profile. The default variant sets labels in a column beside their values; variant=\"leader\" runs a dotted leader from each label to its value, as on a working paper or a table of contents. Labels are body text in the secondary color, values primary text.",
+    "row-padding-block": {
+      "$value": "{space.2}",
+      "$description": "Space above and below each pair."
+    },
+    "row-padding-inline": {
+      "$value": "{space.4}",
+      "$description": "Space either side of each pair, so pairs inside a sheet line up with its tab label."
+    },
+    "row-border-color": {
+      "$value": "{border.subtle}",
+      "$type": "color",
+      "$description": "Hairline between pairs, as quiet as a table's row lines."
+    },
+    "column-gap": {
+      "$value": "{space.4}",
+      "$description": "Space between the label column and the value column in the default variant."
+    },
+    "label-width": {
+      "$value": "minmax(8rem, 1fr)",
+      "$description": "The label column in the default variant. The value column takes twice the room."
+    },
+    "label-color": {
+      "$value": "{text.secondary}",
+      "$type": "color",
+      "$description": "Labels."
+    },
+    "value-color": {
+      "$value": "{text.primary}",
+      "$type": "color",
+      "$description": "Values."
+    },
+    "leader-color": {
+      "$value": "{border.control}",
+      "$type": "color",
+      "$description": "The dotted leader at variant=\"leader\". The control edge color: dark enough to lead the eye, still lighter than the text."
+    },
+    "leader-width": {
+      "$value": "{stroke.default}",
+      "$description": "Thickness of the dotted leader."
+    },
+    "leader-gap": {
+      "$value": "{space.1-5}",
+      "$description": "Space between the leader and the label or value either side of it."
+    }
+  }
+}

package/tokens/component/sheet.json

@@ -0,0 +1,62 @@
+{
+  "sheet": {
+    "$description": "Sheet: a working-paper surface. A raised panel with a heavier rule across its top, and an optional tab label that sits on the rule like the tab of a ledger page. Built from the surface, border and rule concepts; only its own measures are here.",
+    "background": {
+      "$value": "{surface.raised}",
+      "$type": "color",
+      "$description": "The sheet's fill: the raised surface, one level above the page like any card or panel."
+    },
+    "border-color": {
+      "$value": "{border.default}",
+      "$type": "color",
+      "$description": "The sheet's sides and bottom, the everyday divider."
+    },
+    "border-width": {
+      "$value": "{stroke.default}",
+      "$description": "Thickness of the sides and bottom."
+    },
+    "rule-width": {
+      "$value": "{stroke.medium}",
+      "$description": "The top rule. A sheet always has one, so it is its own token rather than rule.width (which is 0 until a brand turns it on for tables and drawers)."
+    },
+    "rule-color": {
+      "$value": "{rule.color}",
+      "$type": "color",
+      "$description": "The top rule's color: the working-paper rule color, so sheets and ruled tables match."
+    },
+    "radius": {
+      "$value": "{radius.surface}",
+      "$description": "Corners, like any card or panel. The top corners stay square under a tab label, so the tab sits flush on the rule."
+    },
+    "padding": {
+      "$value": "{space.4}",
+      "$description": "Space inside a sheet with inset set. Without it, rows and tables inside run edge to edge."
+    },
+    "tab-background": {
+      "$value": "{surface.inverse}",
+      "$type": "color",
+      "$description": "The tab label's fill: the inverse surface, so the label reads as the sheet's name, and its text passes AA in every theme."
+    },
+    "tab-color": {
+      "$value": "{text.on-inverse-surface}",
+      "$type": "color",
+      "$description": "Text on the tab label."
+    },
+    "tab-height": {
+      "$value": "{space.7}",
+      "$description": "Height of the tab label."
+    },
+    "tab-padding-inline": {
+      "$value": "{space.3-5}",
+      "$description": "Space either side of the tab label's text."
+    },
+    "tab-radius": {
+      "$value": "{radius.sm}",
+      "$description": "The tab label's top corners. Its bottom corners stay square where it meets the rule."
+    },
+    "header-gap": {
+      "$value": "{space.3}",
+      "$description": "Space between the tab label and an action at the end of the header row, such as an Edit link."
+    }
+  }
+}

package/tokens/component/stat-figure.json

@@ -0,0 +1,58 @@
+{
+  "stat-figure": {
+    "$description": "StatFigure: one large figure with a caps label above and a caption under it, for the few numbers a page leads with (a balance, a count of open items). The label is caps-condense, the figure the figures text family, the caption body-condense; only its own measures are here.",
+    "figure-font-size": {
+      "$value": "{font-size.4xl}",
+      "$description": "Size of the figure. Large enough to lead the page, a step under the page title."
+    },
+    "figure-font-size-sm": {
+      "$value": "{font-size.2xl}",
+      "$description": "Size of the figure at size=\"sm\", for a row of figures in a card or a sheet header."
+    },
+    "figure-line-height": {
+      "$value": "{line-height.4xl}",
+      "$description": "Line height paired with figure-font-size."
+    },
+    "figure-line-height-sm": {
+      "$value": "{line-height.2xl}",
+      "$description": "Line height paired with figure-font-size-sm."
+    },
+    "figure-font-weight": {
+      "$value": "{font-weight.semibold}",
+      "$description": "Weight of the figure."
+    },
+    "figure-color": {
+      "$value": "{text.primary}",
+      "$type": "color",
+      "$description": "The figure's color."
+    },
+    "figure-color-accent": {
+      "$value": "{text.accent}",
+      "$type": "color",
+      "$description": "The figure's color at tone=\"accent\", for a figure that asks for action (open questions, items to review)."
+    },
+    "underline-width": {
+      "$value": "{stroke.thick}",
+      "$description": "The double underline at underline=\"double\", the accountant's mark for a final total. A CSS double border, so at least 3px."
+    },
+    "underline-color": {
+      "$value": "{rule.color}",
+      "$type": "color",
+      "$description": "The double underline's color: the working-paper rule color, like a grand total's double rule."
+    },
+    "label-color": {
+      "$value": "{text.secondary}",
+      "$type": "color",
+      "$description": "The caps label above the figure."
+    },
+    "caption-color": {
+      "$value": "{text.secondary}",
+      "$type": "color",
+      "$description": "The caption under the figure."
+    },
+    "gap": {
+      "$value": "{space.1}",
+      "$description": "Space between the label, the figure and the caption."
+    }
+  }
+}

package/tokens/foundation/type.json

@@ -53,6 +53,10 @@
       "$value": "0.05em",
       "$description": "Small caps and labels."
     },
+    "caps": {
+      "$value": "0.08em",
+      "$description": "Uppercase labels that sit beside figures, such as a column head or a working-paper caption. Between wider and widest."
+    },
     "widest": {
       "$value": "0.1em",
       "$description": "Uppercase group labels."

package/tokens/semantic/content.json

@@ -91,6 +91,10 @@
       "$value": "{content.prose-color}",
       "$description": "Code block text, the same as prose."
     },
+    "pre-radius": {
+      "$value": "{radius.surface}",
+      "$description": "Code block corners, like any panel, so a brand that squares its surfaces squares code blocks too."
+    },
     "prose-color": {
       "$value": "{text.primary}",
       "$type": "color",

package/tokens/semantic/rule.json

@@ -0,0 +1,15 @@
+{
+  "rule": {
+    "$description": "The working-paper rule: a heavier top edge on sheets, tables, data lists and drawers, like the ruled line across the top of a ledger page. Off by default, so a brand turns it on with tokens: { \"rule.width\": \"{stroke.medium}\" }. While it is on, the rule takes the place of that edge's normal border.",
+    "width": {
+      "$type": "dimension",
+      "$value": "0px",
+      "$description": "Thickness of the top rule. 0 turns it off and leaves every top edge as it was. Point it at a stroke step (stroke.medium or stroke.thick) to turn it on."
+    },
+    "color": {
+      "$type": "color",
+      "$value": "{border.strong}",
+      "$description": "Color of the top rule. The chrome's strong border, so the rule reads as structure, not as an accent or a selection. A brand can point it at text.primary for an ink rule."
+    }
+  }
+}

package/tokens/semantic/table.json

@@ -76,6 +76,22 @@
     "radius": {
       "$value": "{radius.surface}",
       "$description": "Grid corners, like any card or panel."
+    },
+    "total-rule-color": {
+      "$value": "{rule.color}",
+      "$description": "The line above a subtotal or total row and the double line under a grand total. The working-paper rule color, so totals and sheet tops are ruled in the same ink."
+    },
+    "subtotal-rule-width": {
+      "$value": "{stroke.default}",
+      "$description": "The single line above a subtotal row (tr data-total=\"subtotal\"), the line an accountant draws before adding a column."
+    },
+    "grand-total-rule-width": {
+      "$value": "{stroke.thick}",
+      "$description": "The double line under a grand total row (tr data-total=\"grand\"). It is drawn as a CSS double border, which needs at least 3px to show two strokes."
+    },
+    "total-background": {
+      "$value": "{table.background}",
+      "$description": "Fill of a subtotal or grand total row: the cell color, so the rules mark the total instead of a band. The footer's default totals row keeps the header tray."
     }
   }
 }

package/tokens/semantic/typography.json

@@ -72,6 +72,20 @@
       },
       "$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."
     },
+    "figures-base": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.mono}",
+        "fontSize": "{font-size.md}",
+        "fontWeight": "{font-weight.normal}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.md}"
+      },
+      "$description": "Figures in the base tier: an amount beside base text, a balance in a card. The mono family with tabular numbers, so digits line up.",
+      "$extensions": {
+        "sl.font-variant-numeric": "tabular-nums"
+      }
+    },
     "code-condense": {
       "$type": "typography",
       "$value": {
@@ -83,6 +97,20 @@
       },
       "$description": "Code uses the mono family so characters line up."
     },
+    "figures-condense": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.mono}",
+        "fontSize": "{font-size.sm}",
+        "fontWeight": "{font-weight.normal}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.sm}"
+      },
+      "$description": "Figures in the condense tier: amounts and counts in tables and dense rows. The mono family with tabular numbers, so digits line up down a column.",
+      "$extensions": {
+        "sl.font-variant-numeric": "tabular-nums"
+      }
+    },
     "body-condense": {
       "$type": "typography",
       "$value": {
@@ -146,6 +174,20 @@
         "sl.text-transform": "uppercase"
       }
     },
+    "caps-condense": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.body}",
+        "fontSize": "{font-size.sm}",
+        "fontWeight": "{font-weight.semibold}",
+        "letterSpacing": "{letter-spacing.caps}",
+        "lineHeight": "{line-height.sm}"
+      },
+      "$description": "Caps labels in the condense tier: a working-paper caption, a column head over figures, a sheet's tab label. Uppercase and tracked a little wider than an eyebrow, so it reads as a label and not a heading.",
+      "$extensions": {
+        "sl.text-transform": "uppercase"
+      }
+    },
     "title-condense": {
       "$type": "typography",
       "$value": {