@scattered-light/loomiere 0.8.0 → 0.10.0

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', '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`.',
+      `- **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', 'AppBar', 'PickerButton', 'SideNav'].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, DescriptionList, AppBar, PickerButton and SideNav 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, DescriptionList (with `Loomiere.DescriptionItem`), AppBar (with `Loomiere.AppBarSpacer`), PickerButton and SideNav (with `Loomiere.SideNavItem`, `Loomiere.SideNavGroup` and `Loomiere.SideNavToggle`) 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.',
       '',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scattered-light/loomiere",
-  "version": "0.8.0",
+  "version": "0.10.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/component/app-bar.json

@@ -0,0 +1,40 @@
+{
+  "app-bar": {
+    "$description": "AppBar: the bar across the top of an app window. It holds the wordmark, context pickers, a module switch and icon actions in one row, and sits on a line in the rule color. With rule.width on, that line is the working-paper rule.",
+    "height": {
+      "$value": "{space.16}",
+      "$description": "Least height of the bar. It grows if its contents wrap."
+    },
+    "padding-inline": {
+      "$value": "{space.6}",
+      "$description": "Space at the bar's start and end."
+    },
+    "gap": {
+      "$value": "{space.2-5}",
+      "$description": "Space between the things in the bar."
+    },
+    "background": {
+      "$value": "{surface.raised}",
+      "$type": "color",
+      "$description": "The bar's fill: one step off the page, like a card, so the page reads as sitting under it."
+    },
+    "border-width": {
+      "$value": "{stroke.default}",
+      "$description": "The line under the bar while rule.width is 0. With rule.width on, the line takes the thicker of the two."
+    },
+    "border-color": {
+      "$value": "{rule.color}",
+      "$type": "color",
+      "$description": "The line under the bar, in the rule color, so an ink rule brand gets an ink line here too."
+    },
+    "divider-height": {
+      "$value": "{space.6}",
+      "$description": "Height of a vertical Separator between groups of actions in the bar."
+    },
+    "divider-color": {
+      "$value": "{border.strong}",
+      "$type": "color",
+      "$description": "Color of a vertical Separator in the bar."
+    }
+  }
+}

package/tokens/component/picker-button.json

@@ -0,0 +1,14 @@
+{
+  "picker-button": {
+    "$description": "PickerButton: a trigger that names what it picks with a caps label before the current choice (CLIENT Alpha Services). It has the field look of a Select trigger; only its own measures are here.",
+    "max-width": {
+      "$value": "18rem",
+      "$description": "Widest the button grows. A longer choice is cut with an ellipsis; the label never is."
+    },
+    "label-color": {
+      "$value": "{text.secondary}",
+      "$type": "color",
+      "$description": "The caps label, quieter than the choice it names."
+    }
+  }
+}

package/tokens/component/side-nav.json

@@ -0,0 +1,102 @@
+{
+  "side-nav": {
+    "$description": "SideNav: the column of links down the side of a workspace. Rows are ruled apart like a ledger, the current row sits on the raised surface with a rule under it, counts are figures in the accent text color, and group headings are caps labels. Built from the surface, border and rule concepts; only its own measures are here.",
+    "background": {
+      "$value": "{surface.tray}",
+      "$type": "color",
+      "$description": "The column's fill: the tray surface, a step off the page, so the current row on the raised surface stands out from it."
+    },
+    "border-color": {
+      "$value": "{border.default}",
+      "$type": "color",
+      "$description": "The line between the column and the page."
+    },
+    "item-height": {
+      "$value": "{control.height-md}",
+      "$description": "Least height of a row: the regular control height, so a row is as tall as a button."
+    },
+    "item-padding-inline": {
+      "$value": "{space.5}",
+      "$description": "Space at each end of a row."
+    },
+    "item-gap": {
+      "$value": "{space.2}",
+      "$description": "Space between a row's label and its count."
+    },
+    "item-divider-color": {
+      "$value": "{border.subtle}",
+      "$type": "color",
+      "$description": "The hairline under each row."
+    },
+    "item-color": {
+      "$value": "{text.primary}",
+      "$type": "color",
+      "$description": "A row's text."
+    },
+    "item-color-disabled": {
+      "$value": "{text.secondary}",
+      "$type": "color",
+      "$description": "A row that is not available yet. Secondary text, not the faded disabled color, so its hint stays readable."
+    },
+    "item-background-hover": {
+      "$value": "{fill.subtle}",
+      "$type": "color",
+      "$description": "A row under the pointer."
+    },
+    "item-background-current": {
+      "$value": "{surface.raised}",
+      "$type": "color",
+      "$description": "The current row: the raised surface, so it reads as the open page."
+    },
+    "indicator-width": {
+      "$value": "{stroke.medium}",
+      "$description": "The line under the current row."
+    },
+    "indicator-color": {
+      "$value": "{rule.color}",
+      "$type": "color",
+      "$description": "The current row's line: the working-paper rule color, so the nav and the sheets share one ink."
+    },
+    "count-color": {
+      "$value": "{text.accent}",
+      "$type": "color",
+      "$description": "A count at the end of a row, such as items open. Accent text so it asks for attention."
+    },
+    "count-color-quiet": {
+      "$value": "{text.secondary}",
+      "$type": "color",
+      "$description": "A count that is only information (tone=\"quiet\"), such as a total."
+    },
+    "group-padding-top": {
+      "$value": "{space.5}",
+      "$description": "Space above a group heading."
+    },
+    "group-label-color": {
+      "$value": "{text.secondary}",
+      "$type": "color",
+      "$description": "A group heading's caps label."
+    },
+    "toggle-size": {
+      "$value": "{space.6}",
+      "$description": "The collapse button's width and height. It sits on the column's edge."
+    },
+    "toggle-offset": {
+      "$value": "{space.4}",
+      "$description": "Distance of the collapse button from the top of the column."
+    },
+    "toggle-background": {
+      "$value": "{surface.raised}",
+      "$type": "color",
+      "$description": "The collapse button's fill."
+    },
+    "toggle-border-color": {
+      "$value": "{border.strong}",
+      "$type": "color",
+      "$description": "The collapse button's outline."
+    },
+    "collapsed-width": {
+      "$value": "{space.11}",
+      "$description": "Width of the column when it is collapsed, wide enough for the collapse button."
+    }
+  }
+}

package/tokens/component/toggle-group.json

@@ -0,0 +1,25 @@
+{
+  "toggle-group": {
+    "$description": "Toggle group's own decisions. The default strip is the bar concept; these are for variant=\"segmented\": joined toggles inside one outline, the pressed one filled solid, for switching between a few views or modules.",
+    "segmented-border-color": {
+      "$value": "{rule.color}",
+      "$type": "color",
+      "$description": "The outline around a segmented group and the line between its toggles. The rule color, so it is a control edge by default and ink with an ink rule."
+    },
+    "segmented-background": {
+      "$value": "{surface.raised}",
+      "$type": "color",
+      "$description": "Fill of a toggle that is not pressed."
+    },
+    "segmented-pressed-background": {
+      "$value": "{fill.inverse}",
+      "$type": "color",
+      "$description": "Fill of the pressed toggle: the solid chrome color, dark on light pages and light on dark ones."
+    },
+    "segmented-pressed-color": {
+      "$value": "{text.on-inverse}",
+      "$type": "color",
+      "$description": "Text on the pressed toggle."
+    }
+  }
+}