@olddevs/ui 4.6.0 → 4.6.1

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.
package/docs/icons.en.md CHANGED
@@ -113,7 +113,7 @@ import { DeleteIcon, SearchIcon } from "@olddevs/ui/icons";
113
113
  | Vertical "more": the Block menu | `MoreVerticalIcon` | `MoreIcon`, `DragHandleIcon` |
114
114
  | Duplicate next to the original | `DuplicateIcon` | `CopyIcon` |
115
115
  | Arrow up / down | `ArrowUpIcon`, `ArrowDownIcon` | `ChevronUpIcon`, `SortIcon` |
116
- | Document Layout in columns | `ColumnLayoutIcon` | `ColumnsIcon` |
116
+ | A Column layout of the Document | `ColumnLayoutIcon` | `ColumnsIcon` |
117
117
  | Wrapper: a group of Blocks | `WrapperIcon` | `ColumnLayoutIcon` |
118
118
  | Remove the Wrapper, keep the Blocks | `UnwrapIcon` | `DeleteIcon` |
119
119
  | Collapsible Block of the Editor | `DetailsIcon` | `ChevronDownIcon` |
@@ -185,15 +185,15 @@ has no checkboxes, so that a list of records does not read as "done".
185
185
  The only visible label on the Toolbar buttons is the icon; the button's name
186
186
  comes from `aria-label`, and the keyboard shortcut is shown by a tooltip.
187
187
 
188
- The Insert menu added `ParagraphIcon` (¶) — the "Turn into
188
+ The Slash menu added `ParagraphIcon` (¶) — the "Turn into
189
189
  paragraph" item. `HeadingIcon` does not fit it: that one is a heading in general, with no
190
- level. The "+" button of the Insert menu reuses the existing `AddIcon`.
190
+ level. The "+" button of the Slash menu reuses the existing `AddIcon`.
191
191
 
192
192
  The Block type menu "¶" (under ADR-0049) added
193
193
  `Heading1Icon`–`Heading4Icon` (a heading with the level digit) and `TextIcon` (the letter
194
194
  "T", the "Text" item). `HeadingIcon` remains the icon of a heading without a level: the items of the
195
- Insert menu need it that way. `TextIcon` does not repeat `ParagraphIcon`: that one is
196
- the "paragraph" pilcrow in the Insert menu, and this one is "Text" in the Block type menu. The "¶" button
195
+ Slash menu need it that way. `TextIcon` does not repeat `ParagraphIcon`: that one is
196
+ the "paragraph" pilcrow in the Slash menu, and this one is "Text" in the Block type menu. The "¶" button
197
197
  on the Toolbar shows the icon of the current type: the icon of its menu item,
198
198
  `CodeBlockIcon` in a code Block, or the pilcrow `ParagraphIcon` when there is no text
199
199
  Block under the caret (an image is selected).
@@ -212,13 +212,13 @@ The Block handle added four names: `MoreVerticalIcon` — "⋮", the button of t
212
212
 
213
213
  Emoji added `EmojiIcon` — a smiley face, the button of the emoji grid in the Toolbar. The name is by the meaning "emoji", not by the glyph: a face elsewhere would mean mood or rating, and that would be a different decision under ADR-0049.
214
214
 
215
- HTML mode added `SourceIcon` — a sheet with `</>` (`FileCode`), the "HTML" button of the Toolbar: the source code of the whole Document. `CodeBlockIcon` already means a code Block inside a Document, and `CodeIcon` the subject topic "development"; a third meaning is not attached to them (ADR-0049).
215
+ Source mode added `SourceIcon` — a sheet with `</>` (`FileCode`), the "HTML" button of the Toolbar: the source code of the whole Document. `CodeBlockIcon` already means a code Block inside a Document, and `CodeIcon` the subject topic "development"; a third meaning is not attached to them (ADR-0049).
216
216
 
217
- Layout added `ColumnLayoutIcon` — two columns, the "Layout" item of the Insert menu. `ColumnsIcon` with three columns already means "choosing the columns of a data table", and a second meaning is not attached to it (ADR-0049): the Layout has its own glyph.
217
+ Column layout added `ColumnLayoutIcon` — two columns, the "Layout" item of the Slash menu. `ColumnsIcon` with three columns already means "choosing the columns of a data table", and a second meaning is not attached to it (ADR-0049): the Column layout has its own glyph.
218
218
 
219
- Wrapper added the pair `WrapperIcon` and `UnwrapIcon` — lucide's `Group` and `Ungroup`: a frame with dashed corners around two Blocks and the same Blocks without a frame. The icons sit at the "Wrapper" item of the Insert menu and the "Remove Wrapper" item in the Block handle menu. This is not `ColumnLayoutIcon`: columns put Blocks side by side, while a Wrapper groups them without changing their order. `DeleteIcon` does not fit removal: only the container is deleted, not the content.
219
+ Wrapper added the pair `WrapperIcon` and `UnwrapIcon` — lucide's `Group` and `Ungroup`: a frame with dashed corners around two Blocks and the same Blocks without a frame. The icons sit at the "Wrapper" item of the Slash menu and the "Remove Wrapper" item in the Block handle menu. This is not `ColumnLayoutIcon`: columns put Blocks side by side, while a Wrapper groups them without changing their order. `DeleteIcon` does not fit removal: only the container is deleted, not the content.
220
220
 
221
- Collapsible block added `DetailsIcon` — lucide's `ListCollapse`: a list with collapse arrows, the "Collapsible block" item of the Insert menu. The dictionary had no fitting name: `ChevronDownIcon` is a step and nesting, `CollapseIcon` is collapsing a window, while here it is a whole Block with a title and hidden content. Removing the Block uses the already taken `UnwrapIcon` (ADR-0049).
221
+ Collapsible block added `DetailsIcon` — lucide's `ListCollapse`: a list with collapse arrows, the "Collapsible block" item of the Slash menu. The dictionary had no fitting name: `ChevronDownIcon` is a step and nesting, `CollapseIcon` is collapsing a window, while here it is a whole Block with a title and hidden content. Removing the Block uses the already taken `UnwrapIcon` (ADR-0049).
222
222
 
223
223
  The first iteration of the table made do with two icons for four directions
224
224
  (`AddRowIcon`, `AddColumnIcon`) and an icon for the separate "Table
@@ -61,7 +61,7 @@ blue tint of `cloud`: the background of the inverse surface in the light theme.
61
61
 
62
62
  ### Tones
63
63
 
64
- The "Used by" column is the only way to see why a family has exactly this many
64
+ The "Used by" column is the only way to see why a color scale has exactly this many
65
65
  steps: each one exists for a specific role in a specific theme, and there are no spare ones.
66
66
 
67
67
  | Primitive | Value | Used by |
@@ -155,7 +155,7 @@ text, borders, shadows and `--topbar-bg`, and takes tones and accent from the da
155
155
  ### Inverse surface
156
156
 
157
157
  A pill that has to differ from everything around it by sign, not by step
158
- of brightness: the Editor's Selection menu (`toolbar="bubble"`), which sits directly on the
158
+ of brightness: the Editor's Bubble menu (`toolbar="bubble"`), which sits directly on the
159
159
  Document. Light in the dark themes, dark in the light one. It has the utilities
160
160
  `bg-surface-inverse`, `bg-surface-inverse-hover`, `bg-surface-inverse-pressed`,
161
161
  `text-text-on-inverse`, `outline-accent-on-inverse`.
@@ -366,7 +366,7 @@ VS Code and macOS; 3:1 is not the goal, because in a dark theme such a fill no l
366
366
  holds 4.5:1 for light text on top of it. `--selection-light` is the light variant in
367
367
  any app theme: the Editor's Paper (`surface="paper"`) takes it.
368
368
  `--selection-dark` is the dark mirror in any theme: the Editor's
369
- HTML mode field takes it, dark in the light theme too; the dark themes assign
369
+ Source mode field takes it, dark in the light theme too; the dark themes assign
370
370
  it to `--selection`.
371
371
 
372
372
  The `teal` brand primitives are declared inside its own block and are not part of the shared
@@ -25,11 +25,11 @@ it writes the class `bg-bg-0`, backed by the `@theme` bridge.
25
25
 
26
26
  ### Layer 1 — primitives
27
27
 
28
- Three neutral ramps, one per theme (`slate` for dark, `cloud` for light,
29
- `navy` for dim), and seven tone families. Within a ramp the step number increases with lightness:
28
+ Three neutral scales, one per theme (`slate` for dark, `cloud` for light,
29
+ `navy` for dim), and seven tone scales. Within a scale the step number increases with lightness:
30
30
  1 is the darkest, 12 the lightest.
31
31
 
32
- Three ramps instead of one is not duplication: each theme's neutrals are tuned
32
+ Three scales instead of one is not duplication: each theme's neutrals are tuned
33
33
  by hand for its own background, and reducing them to one scale would mean recoloring two
34
34
  themes out of three.
35
35
 
@@ -58,7 +58,7 @@ cover both; details and numbers are in the comments of `styles.css`.
58
58
 
59
59
  **Inverse surface** is a separate group of roles for a pill
60
60
  that sits directly on the Document and has to differ from it by polarity, not by a single
61
- step: the Editor's Selection menu. `--surface-inverse` (the background),
61
+ step: the Editor's Bubble menu. `--surface-inverse` (the background),
62
62
  `--surface-inverse-hover` and `--surface-inverse-pressed` (hover and press),
63
63
  `--text-on-inverse` (text and icons) are light in `dark` and `dim`, and dark in
64
64
  `light`. The focus outline on it is `--accent-on-inverse`: it is the `--accent-strong`
@@ -71,7 +71,7 @@ a compatibility layer. Components get their colors through them, via Tailwind cl
71
71
 
72
72
  ### Layer 3 — component tokens
73
73
 
74
- The list is **closed**. A component token is added when a family has a real
74
+ The list is **closed**. A component token is added when a component family has a real
75
75
  reason to differ from the semantics, not "just in case"; a token with no reader is
76
76
  not added at all.
77
77
 
@@ -346,7 +346,7 @@ The order is exactly this, checked on `teal`, which ships in the package as a sa
346
346
 
347
347
  **3. Check the light theme separately.** `--accent-strong` is read on a background,
348
348
  and the light theme almost certainly needs its own step; `--accent-on-inverse` is
349
- the opposite, light: the Selection menu pill is dark in the light theme. `--selection`
349
+ the opposite, light: the Bubble menu pill is dark in the light theme. `--selection`
350
350
  returns to the light variant only here: the brand block comes after the light theme
351
351
  in the file and would override it with the dark one.
352
352
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@olddevs/ui",
3
- "version": "4.6.0",
3
+ "version": "4.6.1",
4
4
  "description": "Olddevs UI — design system: tokens, themes and accessible UI primitives",
5
5
  "license": "MIT",
6
6
  "private": false,