@axiapps/axi-design 1.12.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 +41 -7
- package/dist/axi.css +36 -1
- 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/dist/themes/glass.css +19 -6
- package/docs/RULES.md +123 -18
- 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/base.css +7 -1
- package/src/primitives.css +15 -0
- package/src/tokens.css +14 -0
|
@@ -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>
|
package/icons/clock.svg
ADDED
package/icons/copy.svg
ADDED
|
@@ -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>
|
package/icons/eye.svg
ADDED
|
@@ -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>
|
package/icons/file.svg
ADDED
package/icons/filter.svg
ADDED
|
@@ -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>
|
package/icons/folder.svg
ADDED
package/icons/info.svg
ADDED
package/icons/link.svg
ADDED
|
@@ -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="M9.5 14.5 L14.5 9.5"/>
|
|
3
|
+
<path d="M13.5 6.5 L16.5 3.5 L20.5 7.5 L17.5 10.5"/>
|
|
4
|
+
<path d="M10.5 17.5 L7.5 20.5 L3.5 16.5 L6.5 13.5"/>
|
|
5
|
+
</svg>
|
package/icons/lock.svg
ADDED
package/icons/menu.svg
ADDED
package/icons/minus.svg
ADDED
package/icons/pause.svg
ADDED
package/icons/pencil.svg
ADDED
package/icons/play.svg
ADDED
package/icons/plus.svg
ADDED
|
@@ -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="M8.5 4.5 L19.5 4.5 L19.5 15.5"/>
|
|
3
|
+
<path d="M16.5 12.5 L19.5 15.5 L22.5 12.5"/>
|
|
4
|
+
<path d="M15.5 19.5 L4.5 19.5 L4.5 8.5"/>
|
|
5
|
+
<path d="M1.5 11.5 L4.5 8.5 L7.5 11.5"/>
|
|
6
|
+
</svg>
|
package/icons/save.svg
ADDED
|
@@ -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="M3.5 3.5 L16.5 3.5 L20.5 7.5 L20.5 20.5 L3.5 20.5 Z"/>
|
|
3
|
+
<path d="M7.5 3.5 L7.5 9.5 L15.5 9.5 L15.5 3.5"/>
|
|
4
|
+
<path d="M7.5 20.5 L7.5 14.5 L16.5 14.5 L16.5 20.5"/>
|
|
5
|
+
</svg>
|
package/icons/search.svg
ADDED
|
@@ -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 8.5 L20.5 8.5"/>
|
|
3
|
+
<path d="M3.5 15.5 L20.5 15.5"/>
|
|
4
|
+
<path d="M9.5 5.5 L12.5 8.5 L9.5 11.5 L6.5 8.5 Z"/>
|
|
5
|
+
<path d="M15.5 12.5 L18.5 15.5 L15.5 18.5 L12.5 15.5 Z"/>
|
|
6
|
+
</svg>
|
package/icons/square.svg
ADDED
package/icons/tag.svg
ADDED
|
@@ -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="M2.5 6.5 L21.5 6.5"/>
|
|
3
|
+
<path d="M5.5 6.5 L5.5 21.5 L18.5 21.5 L18.5 6.5"/>
|
|
4
|
+
<path d="M9.5 6.5 L9.5 2.5 L14.5 2.5 L14.5 6.5"/>
|
|
5
|
+
</svg>
|
package/icons/unlock.svg
ADDED
package/icons/upload.svg
ADDED
package/icons/user.svg
ADDED
package/icons/users.svg
ADDED
|
@@ -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="M9 2.5 L13 6.5 L9 10.5 L5 6.5 Z"/>
|
|
3
|
+
<path d="M1.5 20.5 L1.5 18.5 L5.5 14.5 L12.5 14.5 L16.5 18.5 L16.5 20.5"/>
|
|
4
|
+
<path d="M17 5.5 L20 8.5 L17 11.5"/>
|
|
5
|
+
<path d="M17 14.5 L19.5 14.5 L22.5 17.5 L22.5 20.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="M2.5 9.5 L6.5 9.5 L12.5 3.5 L12.5 20.5 L6.5 14.5 L2.5 14.5 Z"/>
|
|
3
|
+
<path d="M16.5 8.5 L16.5 15.5"/>
|
|
4
|
+
<path d="M20.5 5.5 L20.5 18.5"/>
|
|
5
|
+
</svg>
|
package/icons/x.svg
ADDED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@axiapps/axi-design",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.14.0",
|
|
4
4
|
"description": "The design language for the axi suite — flat and outlined, dark, drawn in saturated ink.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -23,6 +23,9 @@
|
|
|
23
23
|
"./tokens.css": "./src/tokens.css",
|
|
24
24
|
"./accents.css": "./dist/accents.css",
|
|
25
25
|
"./themes/*.css": "./dist/themes/*.css",
|
|
26
|
+
"./icons/sprite.svg": "./dist/icons/sprite.svg",
|
|
27
|
+
"./icons/*.svg": "./dist/icons/*.svg",
|
|
28
|
+
"./icons.json": "./dist/icons/icons.json",
|
|
26
29
|
"./accents.json": "./accents.json",
|
|
27
30
|
"./package.json": "./package.json"
|
|
28
31
|
},
|
|
@@ -33,6 +36,7 @@
|
|
|
33
36
|
"//files": "dist/ is the artifact; src/ rides along because a consumer reading a component wants the source next to them; docs/RULES.md rides along because it is the reason any of it is shaped the way it is. The rest of docs/ - the manifest, the generator and the guides - builds the site and is no use to a consumer. No tests, no gallery. LICENSE and README are included by npm regardless of this list.",
|
|
34
37
|
"files": [
|
|
35
38
|
"dist",
|
|
39
|
+
"icons",
|
|
36
40
|
"src",
|
|
37
41
|
"docs/RULES.md",
|
|
38
42
|
"accents.json",
|
package/src/base.css
CHANGED
|
@@ -11,7 +11,13 @@ html { color-scheme: dark; }
|
|
|
11
11
|
|
|
12
12
|
body {
|
|
13
13
|
margin: 0;
|
|
14
|
-
|
|
14
|
+
/* Longhands rather than the shorthand: the ground is a colour and the light
|
|
15
|
+
over it is an image, and `background:` would make setting either one
|
|
16
|
+
reset the other. Fixed so a theme's light stays put as the page scrolls
|
|
17
|
+
instead of stretching to the document's height. */
|
|
18
|
+
background-color: var(--axi-ground);
|
|
19
|
+
background-image: var(--axi-ground-image);
|
|
20
|
+
background-attachment: fixed;
|
|
15
21
|
color: var(--axi-text);
|
|
16
22
|
font: var(--axi-t-body);
|
|
17
23
|
-webkit-font-smoothing: antialiased;
|
package/src/primitives.css
CHANGED
|
@@ -445,3 +445,18 @@
|
|
|
445
445
|
/* object-fit rather than a background-image, so the <img>'s alt text survives
|
|
446
446
|
and a broken source is visible rather than silently blank. */
|
|
447
447
|
.axi-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
448
|
+
|
|
449
|
+
/* ---------- icon ---------- */
|
|
450
|
+
|
|
451
|
+
/* Rule 12's glyphs, sized and positioned - and nothing else. The drawing
|
|
452
|
+
brings its own stroke and its 24 canvas; the ink is inherited, because an
|
|
453
|
+
icon is whatever colour the thing it sits in is written in. `flex: none`
|
|
454
|
+
is load-bearing rather than defensive: the commonest placement in the set
|
|
455
|
+
is beside a label inside a button, which is a flex container, and an em
|
|
456
|
+
width alone gets shrunk there. */
|
|
457
|
+
.axi-icon {
|
|
458
|
+
width: var(--axi-icon-size, 1.25em);
|
|
459
|
+
height: var(--axi-icon-size, 1.25em);
|
|
460
|
+
flex: none;
|
|
461
|
+
vertical-align: -0.2em;
|
|
462
|
+
}
|
package/src/tokens.css
CHANGED
|
@@ -12,6 +12,20 @@
|
|
|
12
12
|
:root {
|
|
13
13
|
/* --- surface & text --- */
|
|
14
14
|
--axi-ground: #15181d; /* the page itself */
|
|
15
|
+
/* An image layer painted over the ground colour, on the page and nowhere
|
|
16
|
+
else. The second toll the Themes section describes, and it exists for the
|
|
17
|
+
same reason --axi-surface-filter does: a glass theme wants the page lit
|
|
18
|
+
from a few directions, and it does not get to introduce a gradient any
|
|
19
|
+
more than it got to introduce a blur. Declared here inert (`none`), read
|
|
20
|
+
unconditionally by body, and restated by the theme.
|
|
21
|
+
|
|
22
|
+
Why a second token rather than letting a theme put the gradient in
|
|
23
|
+
--axi-ground itself: --axi-ground is read as `background-color` by the
|
|
24
|
+
plot and the select, where an image value is invalid and drops out, and
|
|
25
|
+
as the flat fill of the masthead, the tooltip row and a dozen inset
|
|
26
|
+
shapes, where a page-positioned radial would render as an arbitrary
|
|
27
|
+
wedge of colour. The ground stays a colour. This is the page's light. */
|
|
28
|
+
--axi-ground-image: none;
|
|
15
29
|
--axi-surface: #222731; /* a panel raised off the page */
|
|
16
30
|
--axi-surface-raised: #2b313d; /* a chip or popover raised off a panel */
|
|
17
31
|
--axi-ink-line: #0c0e12; /* the outline every raised element is drawn with */
|