@scattered-light/loomiere 0.8.0 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -345,8 +345,8 @@ function brandBook({ theme, brand, byPath, cssName, usageOf, tokens, tiers, styl
|
|
|
345
345
|
'',
|
|
346
346
|
'`window.Loomiere` holds two kinds of component:',
|
|
347
347
|
'',
|
|
348
|
-
`- **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\`.`,
|
|
349
|
-
'- **Table, Badge, DatePicker, MoneyField, Splitter, ListDetail, EmptyState, DataTable, DataList, CollectionToolbar, CollectionPagination, EditableList, Sheet, StatFigure and
|
|
348
|
+
`- **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'].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\`.`,
|
|
349
|
+
'- **Table, Badge, DatePicker, MoneyField, Splitter, ListDetail, EmptyState, DataTable, DataList, CollectionToolbar, CollectionPagination, EditableList, Sheet, StatFigure, DescriptionList, AppBar and PickerButton 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`) and PickerButton come from the package root or `./custom`.',
|
|
350
350
|
'',
|
|
351
351
|
'`Loomiere.Base` holds the bare Base UI parts for the wrappers too (`Loomiere.Base.Button`), for when you need the part without its classes.',
|
|
352
352
|
'',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@scattered-light/loomiere",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.0",
|
|
4
4
|
"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.",
|
|
5
5
|
"keywords": ["design-tokens", "theme", "style-dictionary", "dtcg", "oklch", "base-ui", "ag-grid", "tailwind"],
|
|
6
6
|
"repository": {
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
{
|
|
2
|
+
"app-bar": {
|
|
3
|
+
"$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.",
|
|
4
|
+
"height": {
|
|
5
|
+
"$value": "{space.16}",
|
|
6
|
+
"$description": "Least height of the bar. It grows if its contents wrap."
|
|
7
|
+
},
|
|
8
|
+
"padding-inline": {
|
|
9
|
+
"$value": "{space.6}",
|
|
10
|
+
"$description": "Space at the bar's start and end."
|
|
11
|
+
},
|
|
12
|
+
"gap": {
|
|
13
|
+
"$value": "{space.2-5}",
|
|
14
|
+
"$description": "Space between the things in the bar."
|
|
15
|
+
},
|
|
16
|
+
"background": {
|
|
17
|
+
"$value": "{surface.raised}",
|
|
18
|
+
"$type": "color",
|
|
19
|
+
"$description": "The bar's fill: one step off the page, like a card, so the page reads as sitting under it."
|
|
20
|
+
},
|
|
21
|
+
"border-width": {
|
|
22
|
+
"$value": "{stroke.default}",
|
|
23
|
+
"$description": "The line under the bar while rule.width is 0. With rule.width on, the line takes the thicker of the two."
|
|
24
|
+
},
|
|
25
|
+
"border-color": {
|
|
26
|
+
"$value": "{rule.color}",
|
|
27
|
+
"$type": "color",
|
|
28
|
+
"$description": "The line under the bar, in the rule color, so an ink rule brand gets an ink line here too."
|
|
29
|
+
},
|
|
30
|
+
"divider-height": {
|
|
31
|
+
"$value": "{space.6}",
|
|
32
|
+
"$description": "Height of a vertical Separator between groups of actions in the bar."
|
|
33
|
+
},
|
|
34
|
+
"divider-color": {
|
|
35
|
+
"$value": "{border.strong}",
|
|
36
|
+
"$type": "color",
|
|
37
|
+
"$description": "Color of a vertical Separator in the bar."
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
{
|
|
2
|
+
"picker-button": {
|
|
3
|
+
"$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.",
|
|
4
|
+
"max-width": {
|
|
5
|
+
"$value": "18rem",
|
|
6
|
+
"$description": "Widest the button grows. A longer choice is cut with an ellipsis; the label never is."
|
|
7
|
+
},
|
|
8
|
+
"label-color": {
|
|
9
|
+
"$value": "{text.secondary}",
|
|
10
|
+
"$type": "color",
|
|
11
|
+
"$description": "The caps label, quieter than the choice it names."
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"toggle-group": {
|
|
3
|
+
"$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.",
|
|
4
|
+
"segmented-border-color": {
|
|
5
|
+
"$value": "{rule.color}",
|
|
6
|
+
"$type": "color",
|
|
7
|
+
"$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."
|
|
8
|
+
},
|
|
9
|
+
"segmented-background": {
|
|
10
|
+
"$value": "{surface.raised}",
|
|
11
|
+
"$type": "color",
|
|
12
|
+
"$description": "Fill of a toggle that is not pressed."
|
|
13
|
+
},
|
|
14
|
+
"segmented-pressed-background": {
|
|
15
|
+
"$value": "{fill.inverse}",
|
|
16
|
+
"$type": "color",
|
|
17
|
+
"$description": "Fill of the pressed toggle: the solid chrome color, dark on light pages and light on dark ones."
|
|
18
|
+
},
|
|
19
|
+
"segmented-pressed-color": {
|
|
20
|
+
"$value": "{text.on-inverse}",
|
|
21
|
+
"$type": "color",
|
|
22
|
+
"$description": "Text on the pressed toggle."
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|