@axiapps/axi-design 1.13.0 → 1.14.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.
- package/README.md +31 -0
- package/dist/axi.css +15 -0
- package/dist/icons/arrow-down.svg +4 -0
- package/dist/icons/arrow-left.svg +4 -0
- package/dist/icons/arrow-right.svg +4 -0
- package/dist/icons/arrow-up.svg +4 -0
- package/dist/icons/calendar.svg +6 -0
- package/dist/icons/check-check.svg +4 -0
- package/dist/icons/check.svg +3 -0
- package/dist/icons/chevron-down.svg +3 -0
- package/dist/icons/chevron-left.svg +3 -0
- package/dist/icons/chevron-right.svg +3 -0
- package/dist/icons/chevron-up.svg +3 -0
- package/dist/icons/circle-alert.svg +5 -0
- package/dist/icons/circle-check.svg +4 -0
- package/dist/icons/circle-x.svg +5 -0
- package/dist/icons/clock.svg +4 -0
- package/dist/icons/copy.svg +4 -0
- package/dist/icons/download.svg +5 -0
- package/dist/icons/external-link.svg +5 -0
- package/dist/icons/eye.svg +4 -0
- package/dist/icons/file-text.svg +6 -0
- package/dist/icons/file.svg +4 -0
- package/dist/icons/filter.svg +3 -0
- package/dist/icons/folder-open.svg +4 -0
- package/dist/icons/folder.svg +3 -0
- package/dist/icons/icons.json +671 -0
- package/dist/icons/info.svg +5 -0
- package/dist/icons/link.svg +5 -0
- package/dist/icons/lock.svg +4 -0
- package/dist/icons/menu.svg +5 -0
- package/dist/icons/minus.svg +3 -0
- package/dist/icons/pause.svg +4 -0
- package/dist/icons/pencil.svg +4 -0
- package/dist/icons/play.svg +3 -0
- package/dist/icons/plus.svg +4 -0
- package/dist/icons/refresh-cw.svg +6 -0
- package/dist/icons/save.svg +5 -0
- package/dist/icons/search.svg +4 -0
- package/dist/icons/settings-2.svg +6 -0
- package/dist/icons/skip-forward.svg +4 -0
- package/dist/icons/sprite.svg +203 -0
- package/dist/icons/square.svg +3 -0
- package/dist/icons/tag.svg +4 -0
- package/dist/icons/trash-2.svg +5 -0
- package/dist/icons/unlock.svg +4 -0
- package/dist/icons/upload.svg +5 -0
- package/dist/icons/user.svg +4 -0
- package/dist/icons/users.svg +6 -0
- package/dist/icons/volume-2.svg +5 -0
- package/dist/icons/x.svg +4 -0
- package/docs/RULES.md +64 -0
- package/icons/LICENSE-LUCIDE +51 -0
- package/icons/arrow-down.svg +4 -0
- package/icons/arrow-left.svg +4 -0
- package/icons/arrow-right.svg +4 -0
- package/icons/arrow-up.svg +4 -0
- package/icons/calendar.svg +6 -0
- package/icons/check-check.svg +4 -0
- package/icons/check.svg +3 -0
- package/icons/chevron-down.svg +3 -0
- package/icons/chevron-left.svg +3 -0
- package/icons/chevron-right.svg +3 -0
- package/icons/chevron-up.svg +3 -0
- package/icons/circle-alert.svg +5 -0
- package/icons/circle-check.svg +4 -0
- package/icons/circle-x.svg +5 -0
- package/icons/clock.svg +4 -0
- package/icons/copy.svg +4 -0
- package/icons/download.svg +5 -0
- package/icons/external-link.svg +5 -0
- package/icons/eye.svg +4 -0
- package/icons/file-text.svg +6 -0
- package/icons/file.svg +4 -0
- package/icons/filter.svg +3 -0
- package/icons/folder-open.svg +4 -0
- package/icons/folder.svg +3 -0
- package/icons/info.svg +5 -0
- package/icons/link.svg +5 -0
- package/icons/lock.svg +4 -0
- package/icons/menu.svg +5 -0
- package/icons/minus.svg +3 -0
- package/icons/pause.svg +4 -0
- package/icons/pencil.svg +4 -0
- package/icons/play.svg +3 -0
- package/icons/plus.svg +4 -0
- package/icons/refresh-cw.svg +6 -0
- package/icons/save.svg +5 -0
- package/icons/search.svg +4 -0
- package/icons/settings-2.svg +6 -0
- package/icons/skip-forward.svg +4 -0
- package/icons/square.svg +3 -0
- package/icons/tag.svg +4 -0
- package/icons/trash-2.svg +5 -0
- package/icons/unlock.svg +4 -0
- package/icons/upload.svg +5 -0
- package/icons/user.svg +4 -0
- package/icons/users.svg +6 -0
- package/icons/volume-2.svg +5 -0
- package/icons/x.svg +4 -0
- package/package.json +5 -1
- package/src/primitives.css +15 -0
package/README.md
CHANGED
|
@@ -53,6 +53,36 @@ site](https://darkharasho.github.io/axi-design/) for every component, with live
|
|
|
53
53
|
accent and theme switchers in the masthead. `/gallery/` still holds the
|
|
54
54
|
everything-at-once view.
|
|
55
55
|
|
|
56
|
+
### An icon set of its own
|
|
57
|
+
|
|
58
|
+
Forty-seven glyphs drawn to [rule 12](docs/RULES.md) — a 24 canvas, a 3px
|
|
59
|
+
stroke, mitered joins, square corners, and no angle that is not 0°, 45° or 90°.
|
|
60
|
+
They take their ink from whatever they sit in, so a glyph inside an accent
|
|
61
|
+
button turns accent-ink with the label and follows every accent and theme
|
|
62
|
+
switch with no extra rule.
|
|
63
|
+
|
|
64
|
+
```html
|
|
65
|
+
<svg class="axi-icon"><use href="node_modules/@axiapps/axi-design/dist/icons/sprite.svg#axi-search"/></svg>
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
**One caveat, and it matters for Electron.** A `<use>` pointing into a separate
|
|
69
|
+
file is a cross-document reference, and those are same-origin: over `http(s)`
|
|
70
|
+
from your own origin it works and the glyph inherits `currentColor` (measured in
|
|
71
|
+
Chromium 150). Under `file://` — which is how an Electron window opened with
|
|
72
|
+
`loadFile()` runs — the reference resolves to nothing and the icon is silently
|
|
73
|
+
absent, no error, no fallback. In that case do one of two things: inline
|
|
74
|
+
`dist/icons/sprite.svg` into the document once (a hidden `<svg>` before
|
|
75
|
+
`</body>`, which is what this project's own docs site does) and reference bare
|
|
76
|
+
fragments like `#axi-search`, or use the standalone `dist/icons/<name>.svg`
|
|
77
|
+
files. Serving the renderer over `http://localhost` also works.
|
|
78
|
+
|
|
79
|
+
One sprite holds the set; `dist/icons/<name>.svg` is the same drawing on its own,
|
|
80
|
+
and `dist/icons/icons.json` is the catalogue — name, categories, aliases and
|
|
81
|
+
keywords — for an app that wants to build a picker. Size a glyph with
|
|
82
|
+
`--axi-icon-size`. The vocabulary derives from [Lucide](https://lucide.dev)
|
|
83
|
+
under the ISC licence (`icons/LICENSE-LUCIDE`); none of the path data does.
|
|
84
|
+
Browse the set at [`/icons/`](https://darkharasho.github.io/axi-design/icons/).
|
|
85
|
+
|
|
56
86
|
### A different look, without carrying one
|
|
57
87
|
|
|
58
88
|
If the flat dark ground is not what your app wants, import a theme beside the
|
|
@@ -125,6 +155,7 @@ not "what does the system look like". Everything else is
|
|
|
125
155
|
| `--axi-tick-h` | the height of an `.axi-ticks` strip, and so of every mark in it | `15px` | `<div class="axi-ticks" style="--axi-tick-h: 22px">` |
|
|
126
156
|
| `--axi-ticks-gap` | the gap between marks in `.axi-ticks` | `3px` | `<div class="axi-ticks" style="--axi-ticks-gap: 2px">` |
|
|
127
157
|
| `--axi-spinner-size` | the size of an `.axi-spinner` | `20px` | `<span class="axi-spinner" style="--axi-spinner-size: 34px"></span>` |
|
|
158
|
+
| `--axi-icon-size` | an `.axi-icon`'s box, both dimensions | `1.25em` | `<svg class="axi-icon" style="--axi-icon-size: 2rem"><use href="#axi-search"/></svg>` |
|
|
128
159
|
<!-- /axi:knobs -->
|
|
129
160
|
|
|
130
161
|
`--axi-page-pad: 0` is the one to know about: it is how a measure nested
|
package/dist/axi.css
CHANGED
|
@@ -668,6 +668,21 @@ a { color: inherit; }
|
|
|
668
668
|
and a broken source is visible rather than silently blank. */
|
|
669
669
|
.axi-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
670
670
|
|
|
671
|
+
/* ---------- icon ---------- */
|
|
672
|
+
|
|
673
|
+
/* Rule 12's glyphs, sized and positioned - and nothing else. The drawing
|
|
674
|
+
brings its own stroke and its 24 canvas; the ink is inherited, because an
|
|
675
|
+
icon is whatever colour the thing it sits in is written in. `flex: none`
|
|
676
|
+
is load-bearing rather than defensive: the commonest placement in the set
|
|
677
|
+
is beside a label inside a button, which is a flex container, and an em
|
|
678
|
+
width alone gets shrunk there. */
|
|
679
|
+
.axi-icon {
|
|
680
|
+
width: var(--axi-icon-size, 1.25em);
|
|
681
|
+
height: var(--axi-icon-size, 1.25em);
|
|
682
|
+
flex: none;
|
|
683
|
+
vertical-align: -0.2em;
|
|
684
|
+
}
|
|
685
|
+
|
|
671
686
|
/* --- forms.css --- */
|
|
672
687
|
/* axi design language - forms.
|
|
673
688
|
Real inputs, styled. Every control here is an actual <input> or <textarea>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
|
|
2
|
+
<path d="M3.5 5.5 L20.5 5.5 L20.5 20.5 L3.5 20.5 Z"/>
|
|
3
|
+
<path d="M3.5 10.5 L20.5 10.5"/>
|
|
4
|
+
<path d="M8.5 2.5 L8.5 7.5"/>
|
|
5
|
+
<path d="M15.5 2.5 L15.5 7.5"/>
|
|
6
|
+
</svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
|
|
2
|
+
<path d="M8.5 1.5 L15.5 1.5 L22.5 8.5 L22.5 15.5 L15.5 22.5 L8.5 22.5 L1.5 15.5 L1.5 8.5 Z"/>
|
|
3
|
+
<path d="M12 6.5 L12 13.5"/>
|
|
4
|
+
<path d="M12 16.5 L12 18"/>
|
|
5
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
|
|
2
|
+
<path d="M8.5 1.5 L15.5 1.5 L22.5 8.5 L22.5 15.5 L15.5 22.5 L8.5 22.5 L1.5 15.5 L1.5 8.5 Z"/>
|
|
3
|
+
<path d="M7 12 L10.5 15.5 L17 9"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
|
|
2
|
+
<path d="M8.5 1.5 L15.5 1.5 L22.5 8.5 L22.5 15.5 L15.5 22.5 L8.5 22.5 L1.5 15.5 L1.5 8.5 Z"/>
|
|
3
|
+
<path d="M8 8 L16 16"/>
|
|
4
|
+
<path d="M16 8 L8 16"/>
|
|
5
|
+
</svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
|
|
2
|
+
<path d="M12.5 4.5 L3.5 4.5 L3.5 20.5 L19.5 20.5 L19.5 11.5"/>
|
|
3
|
+
<path d="M11.5 12.5 L20.5 3.5"/>
|
|
4
|
+
<path d="M13.5 3.5 L20.5 3.5 L20.5 10.5"/>
|
|
5
|
+
</svg>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
|
|
2
|
+
<path d="M5.5 2.5 L14.5 2.5 L19.5 7.5 L19.5 21.5 L5.5 21.5 Z"/>
|
|
3
|
+
<path d="M14.5 2.5 L14.5 7.5 L19.5 7.5"/>
|
|
4
|
+
<path d="M8.5 12.5 L15.5 12.5"/>
|
|
5
|
+
<path d="M8.5 16.5 L15.5 16.5"/>
|
|
6
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
|
|
2
|
+
<path d="M2.5 20.5 L2.5 4.5 L8.5 4.5 L11.5 7.5 L19.5 7.5 L19.5 12.5"/>
|
|
3
|
+
<path d="M10.5 12.5 L22.5 12.5 L14.5 20.5 L2.5 20.5 Z"/>
|
|
4
|
+
</svg>
|