@scattered-light/loomiere 0.9.0 → 0.11.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', '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
|
|
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', '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\`.`,
|
|
349
|
+
'- **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`.',
|
|
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.11.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,110 @@
|
|
|
1
|
+
{
|
|
2
|
+
"side-nav": {
|
|
3
|
+
"$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.",
|
|
4
|
+
"background": {
|
|
5
|
+
"$value": "{surface.tray}",
|
|
6
|
+
"$type": "color",
|
|
7
|
+
"$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."
|
|
8
|
+
},
|
|
9
|
+
"border-color": {
|
|
10
|
+
"$value": "{border.default}",
|
|
11
|
+
"$type": "color",
|
|
12
|
+
"$description": "The line between the column and the page."
|
|
13
|
+
},
|
|
14
|
+
"item-height": {
|
|
15
|
+
"$value": "{control.height-md}",
|
|
16
|
+
"$description": "Least height of a row: the regular control height, so a row is as tall as a button."
|
|
17
|
+
},
|
|
18
|
+
"item-padding-inline": {
|
|
19
|
+
"$value": "{space.5}",
|
|
20
|
+
"$description": "Space at each end of a row."
|
|
21
|
+
},
|
|
22
|
+
"item-gap": {
|
|
23
|
+
"$value": "{space.2}",
|
|
24
|
+
"$description": "Space between a row's label and its count."
|
|
25
|
+
},
|
|
26
|
+
"item-divider-color": {
|
|
27
|
+
"$value": "{border.subtle}",
|
|
28
|
+
"$type": "color",
|
|
29
|
+
"$description": "The hairline under each row."
|
|
30
|
+
},
|
|
31
|
+
"item-color": {
|
|
32
|
+
"$value": "{text.primary}",
|
|
33
|
+
"$type": "color",
|
|
34
|
+
"$description": "A row's text."
|
|
35
|
+
},
|
|
36
|
+
"item-color-disabled": {
|
|
37
|
+
"$value": "{text.secondary}",
|
|
38
|
+
"$type": "color",
|
|
39
|
+
"$description": "A row that is not available yet. Secondary text, not the faded disabled color, so its hint stays readable."
|
|
40
|
+
},
|
|
41
|
+
"item-background-hover": {
|
|
42
|
+
"$value": "{fill.subtle}",
|
|
43
|
+
"$type": "color",
|
|
44
|
+
"$description": "A row under the pointer."
|
|
45
|
+
},
|
|
46
|
+
"item-background-current": {
|
|
47
|
+
"$value": "{surface.raised}",
|
|
48
|
+
"$type": "color",
|
|
49
|
+
"$description": "The current row: the raised surface, so it reads as the open page."
|
|
50
|
+
},
|
|
51
|
+
"indicator-width": {
|
|
52
|
+
"$value": "{stroke.medium}",
|
|
53
|
+
"$description": "The line under the current row."
|
|
54
|
+
},
|
|
55
|
+
"indicator-color": {
|
|
56
|
+
"$value": "{rule.color}",
|
|
57
|
+
"$type": "color",
|
|
58
|
+
"$description": "The current row's line: the working-paper rule color, so the nav and the sheets share one ink."
|
|
59
|
+
},
|
|
60
|
+
"count-color": {
|
|
61
|
+
"$value": "{text.accent}",
|
|
62
|
+
"$type": "color",
|
|
63
|
+
"$description": "A count at the end of a row, such as items open. Accent text so it asks for attention."
|
|
64
|
+
},
|
|
65
|
+
"count-color-quiet": {
|
|
66
|
+
"$value": "{text.secondary}",
|
|
67
|
+
"$type": "color",
|
|
68
|
+
"$description": "A count that is only information (tone=\"quiet\"), such as a total."
|
|
69
|
+
},
|
|
70
|
+
"group-padding-top": {
|
|
71
|
+
"$value": "{space.5}",
|
|
72
|
+
"$description": "Space above a group heading."
|
|
73
|
+
},
|
|
74
|
+
"group-label-color": {
|
|
75
|
+
"$value": "{text.secondary}",
|
|
76
|
+
"$type": "color",
|
|
77
|
+
"$description": "A group heading's caps label."
|
|
78
|
+
},
|
|
79
|
+
"toggle-width": {
|
|
80
|
+
"$value": "{space.6}",
|
|
81
|
+
"$description": "The collapse handle's width. It straddles the column's edge."
|
|
82
|
+
},
|
|
83
|
+
"toggle-height": {
|
|
84
|
+
"$value": "{space.11}",
|
|
85
|
+
"$description": "The collapse handle's height, a tall tab on the column's edge."
|
|
86
|
+
},
|
|
87
|
+
"toggle-radius": {
|
|
88
|
+
"$value": "{radius.control}",
|
|
89
|
+
"$description": "The collapse handle's corners."
|
|
90
|
+
},
|
|
91
|
+
"toggle-offset": {
|
|
92
|
+
"$value": "{space.7}",
|
|
93
|
+
"$description": "Distance of the collapse button from the top of the column."
|
|
94
|
+
},
|
|
95
|
+
"toggle-background": {
|
|
96
|
+
"$value": "{surface.raised}",
|
|
97
|
+
"$type": "color",
|
|
98
|
+
"$description": "The collapse handle's fill."
|
|
99
|
+
},
|
|
100
|
+
"toggle-border-color": {
|
|
101
|
+
"$value": "{text.primary}",
|
|
102
|
+
"$type": "color",
|
|
103
|
+
"$description": "The collapse handle's outline and chevron. It fills with this color on hover."
|
|
104
|
+
},
|
|
105
|
+
"collapsed-width": {
|
|
106
|
+
"$value": "{space.11}",
|
|
107
|
+
"$description": "Width of the column when it is collapsed, wide enough for the collapse handle."
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|