@fluixi-ui/tokens 0.4.0-alpha.7 → 0.4.0-alpha.8
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/dist/css/file-upload.css +40 -0
- package/dist/css/image.css +35 -0
- package/dist/css/table.css +11 -0
- package/dist/css/tags-input.css +91 -0
- package/dist/css/tree-view.css +70 -0
- package/dist/preset.css +4 -0
- package/package.json +1 -1
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
@layer flx.components {
|
|
2
|
+
/* File upload (from @fluixi-ui/file-upload). The dropzone is a dashed drop area
|
|
3
|
+
that also opens the file dialog on click; it lifts while a drag is over it. */
|
|
4
|
+
:where([data-file-upload-dropzone]) {
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
align-items: center;
|
|
8
|
+
justify-content: center;
|
|
9
|
+
gap: var(--flx-ui-space-2);
|
|
10
|
+
padding: var(--flx-ui-space-6) var(--flx-ui-space-4);
|
|
11
|
+
text-align: center;
|
|
12
|
+
font-size: var(--flx-ui-font-size-sm);
|
|
13
|
+
color: var(--flx-ui-color-fg-muted);
|
|
14
|
+
background: var(--flx-ui-color-bg-subtle);
|
|
15
|
+
border: var(--flx-ui-border-width-thin) dashed var(--flx-ui-color-border-strong);
|
|
16
|
+
border-radius: var(--flx-ui-radius-md);
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
transition:
|
|
19
|
+
border-color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
|
|
20
|
+
background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
|
|
21
|
+
color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
|
|
22
|
+
}
|
|
23
|
+
:where([data-file-upload-dropzone]:hover),
|
|
24
|
+
:where([data-file-upload-dropzone][data-dragging]) {
|
|
25
|
+
border-color: var(--flx-ui-color-focus-ring);
|
|
26
|
+
background: var(--flx-ui-color-primary-subtle);
|
|
27
|
+
color: var(--flx-ui-color-fg);
|
|
28
|
+
}
|
|
29
|
+
:where([data-file-upload-dropzone][data-dragging]) {
|
|
30
|
+
border-style: solid;
|
|
31
|
+
}
|
|
32
|
+
:where([data-file-upload-dropzone]:focus-visible) {
|
|
33
|
+
outline: none;
|
|
34
|
+
box-shadow: var(--flx-ui-ctl-ring);
|
|
35
|
+
}
|
|
36
|
+
:where([data-file-upload-dropzone][data-disabled]) {
|
|
37
|
+
opacity: 0.6;
|
|
38
|
+
cursor: not-allowed;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
@layer flx.components {
|
|
2
|
+
/* Image (from @fluixi-ui/image). A sized box that layers the <img>, a loading
|
|
3
|
+
placeholder, and an error fallback; give it a width/height or aspect ratio. */
|
|
4
|
+
:where([data-image]) {
|
|
5
|
+
position: relative;
|
|
6
|
+
display: inline-block;
|
|
7
|
+
overflow: hidden;
|
|
8
|
+
background: var(--flx-ui-color-bg-subtle);
|
|
9
|
+
line-height: 0;
|
|
10
|
+
}
|
|
11
|
+
:where([data-image] > *) {
|
|
12
|
+
position: absolute;
|
|
13
|
+
inset: 0;
|
|
14
|
+
width: 100%;
|
|
15
|
+
height: 100%;
|
|
16
|
+
}
|
|
17
|
+
:where([data-image-img]) {
|
|
18
|
+
object-fit: cover;
|
|
19
|
+
opacity: 0;
|
|
20
|
+
transition: opacity var(--flx-ui-duration-normal) var(--flx-ui-ease-standard);
|
|
21
|
+
}
|
|
22
|
+
:where([data-image][data-status='loaded'] [data-image-img]) {
|
|
23
|
+
opacity: 1;
|
|
24
|
+
}
|
|
25
|
+
:where([data-image][data-status='error'] [data-image-img]) {
|
|
26
|
+
display: none;
|
|
27
|
+
}
|
|
28
|
+
/* Blur-up (LQIP): a scaled, blurred version shown until the image loads. */
|
|
29
|
+
:where([data-image-blur]) {
|
|
30
|
+
background-size: cover;
|
|
31
|
+
background-position: center;
|
|
32
|
+
filter: blur(12px);
|
|
33
|
+
transform: scale(1.1);
|
|
34
|
+
}
|
|
35
|
+
}
|
package/dist/css/table.css
CHANGED
|
@@ -170,4 +170,15 @@
|
|
|
170
170
|
:where([data-pinned='right']) {
|
|
171
171
|
box-shadow: inset 1px 0 0 var(--flx-ui-color-border);
|
|
172
172
|
}
|
|
173
|
+
|
|
174
|
+
/* Compact density — tighter padding + smaller type for dense data tables.
|
|
175
|
+
* Opt in with `data-density="compact"` on the table. */
|
|
176
|
+
[data-table][data-density='compact'] [data-table-head],
|
|
177
|
+
[data-table][data-density='compact'] [data-table-cell],
|
|
178
|
+
[data-table][data-density='compact'] [data-table-footer] [data-table-cell] {
|
|
179
|
+
padding: var(--flx-ui-space-1) var(--flx-ui-space-2);
|
|
180
|
+
}
|
|
181
|
+
[data-table][data-density='compact'] [data-table-cell] {
|
|
182
|
+
font-size: var(--flx-ui-font-size-xs);
|
|
183
|
+
}
|
|
173
184
|
}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
@layer flx.components {
|
|
2
|
+
/* Tags input (from @fluixi-ui/tags-input) — a chip field. The container owns the
|
|
3
|
+
frame + focus ring; the inner input is borderless and grows to fill the row. */
|
|
4
|
+
:where([data-tags-input]) {
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-wrap: wrap;
|
|
8
|
+
align-items: center;
|
|
9
|
+
gap: var(--flx-ui-space-1);
|
|
10
|
+
width: 100%;
|
|
11
|
+
min-height: var(--flx-ui-size-md);
|
|
12
|
+
padding: var(--flx-ui-space-1) var(--flx-ui-space-2);
|
|
13
|
+
color: var(--flx-ui-color-fg);
|
|
14
|
+
background: var(--flx-ui-color-bg);
|
|
15
|
+
border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border-strong);
|
|
16
|
+
border-radius: var(--flx-ui-radius-md);
|
|
17
|
+
cursor: text;
|
|
18
|
+
transition:
|
|
19
|
+
border-color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
|
|
20
|
+
box-shadow var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
|
|
21
|
+
}
|
|
22
|
+
:where([data-tags-input]:focus-within) {
|
|
23
|
+
border-color: var(--flx-ui-color-focus-ring);
|
|
24
|
+
box-shadow: var(--flx-ui-ctl-ring);
|
|
25
|
+
}
|
|
26
|
+
:where([data-tags-input][data-invalid]) {
|
|
27
|
+
border-color: var(--flx-ui-color-danger);
|
|
28
|
+
}
|
|
29
|
+
:where([data-tags-input][data-disabled]) {
|
|
30
|
+
opacity: 0.6;
|
|
31
|
+
cursor: not-allowed;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* The editable input; borderless, inherits the field's type + colour. */
|
|
35
|
+
:where([data-tags-input-field]) {
|
|
36
|
+
flex: 1 1 6ch;
|
|
37
|
+
min-width: 6ch;
|
|
38
|
+
min-height: 0;
|
|
39
|
+
border: none;
|
|
40
|
+
outline: none;
|
|
41
|
+
box-shadow: none;
|
|
42
|
+
background: none;
|
|
43
|
+
font: inherit;
|
|
44
|
+
color: inherit;
|
|
45
|
+
padding: var(--flx-ui-space-1);
|
|
46
|
+
}
|
|
47
|
+
:where([data-tags-input-field]::placeholder) {
|
|
48
|
+
color: var(--flx-ui-color-fg-muted);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* A committed tag chip. */
|
|
52
|
+
:where([data-tags-input-tag]) {
|
|
53
|
+
display: inline-flex;
|
|
54
|
+
align-items: center;
|
|
55
|
+
gap: var(--flx-ui-space-1);
|
|
56
|
+
padding: 0 var(--flx-ui-space-1) 0 var(--flx-ui-space-2);
|
|
57
|
+
height: calc(var(--flx-ui-size-md) - 2 * var(--flx-ui-space-2));
|
|
58
|
+
font-size: var(--flx-ui-font-size-sm);
|
|
59
|
+
color: var(--flx-ui-color-fg);
|
|
60
|
+
background: var(--flx-ui-color-bg-subtle);
|
|
61
|
+
border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
|
|
62
|
+
border-radius: var(--flx-ui-radius-sm);
|
|
63
|
+
white-space: nowrap;
|
|
64
|
+
}
|
|
65
|
+
:where([data-tags-input-tag-remove]) {
|
|
66
|
+
display: inline-flex;
|
|
67
|
+
align-items: center;
|
|
68
|
+
justify-content: center;
|
|
69
|
+
width: 1.3em;
|
|
70
|
+
height: 1.3em;
|
|
71
|
+
padding: 0;
|
|
72
|
+
font: inherit;
|
|
73
|
+
line-height: 1;
|
|
74
|
+
color: var(--flx-ui-color-fg-muted);
|
|
75
|
+
background: none;
|
|
76
|
+
border: none;
|
|
77
|
+
border-radius: var(--flx-ui-radius-sm);
|
|
78
|
+
cursor: pointer;
|
|
79
|
+
transition:
|
|
80
|
+
color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
|
|
81
|
+
background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
|
|
82
|
+
}
|
|
83
|
+
:where([data-tags-input-tag-remove]:hover) {
|
|
84
|
+
color: var(--flx-ui-color-fg);
|
|
85
|
+
background: color-mix(in oklab, var(--flx-ui-color-fg) 10%, transparent);
|
|
86
|
+
}
|
|
87
|
+
:where([data-tags-input-tag-remove]:focus-visible) {
|
|
88
|
+
outline: none;
|
|
89
|
+
box-shadow: var(--flx-ui-ctl-ring);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
@layer flx.components {
|
|
2
|
+
/* Tree view (from @fluixi-ui/tree-view). Rows indent by depth via the
|
|
3
|
+
`--flx-tree-depth` custom property the component sets per item. */
|
|
4
|
+
:where([data-tree-view]),
|
|
5
|
+
:where([data-tree-item-group]) {
|
|
6
|
+
list-style: none;
|
|
7
|
+
margin: 0;
|
|
8
|
+
padding: 0;
|
|
9
|
+
}
|
|
10
|
+
:where([data-tree-item]) {
|
|
11
|
+
outline: none;
|
|
12
|
+
}
|
|
13
|
+
:where([data-tree-item-row]) {
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
gap: var(--flx-ui-space-1);
|
|
17
|
+
padding: var(--flx-ui-space-1) var(--flx-ui-space-2);
|
|
18
|
+
padding-inline-start: calc(
|
|
19
|
+
var(--flx-ui-space-2) + var(--flx-tree-depth, 0) * var(--flx-ui-space-4)
|
|
20
|
+
);
|
|
21
|
+
border-radius: var(--flx-ui-radius-sm);
|
|
22
|
+
font-size: var(--flx-ui-font-size-sm);
|
|
23
|
+
color: var(--flx-ui-color-fg);
|
|
24
|
+
cursor: pointer;
|
|
25
|
+
user-select: none;
|
|
26
|
+
transition: background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
|
|
27
|
+
}
|
|
28
|
+
:where([data-tree-item-row]:hover) {
|
|
29
|
+
background: var(--flx-ui-color-bg-subtle);
|
|
30
|
+
}
|
|
31
|
+
:where([data-tree-item][data-selected] > [data-tree-item-row]) {
|
|
32
|
+
background: var(--flx-ui-color-primary-subtle);
|
|
33
|
+
color: var(--flx-ui-color-primary);
|
|
34
|
+
}
|
|
35
|
+
:where([data-tree-item][data-disabled] > [data-tree-item-row]) {
|
|
36
|
+
opacity: 0.5;
|
|
37
|
+
cursor: not-allowed;
|
|
38
|
+
}
|
|
39
|
+
:where([data-tree-item]:focus-visible > [data-tree-item-row]) {
|
|
40
|
+
outline: none;
|
|
41
|
+
box-shadow: var(--flx-ui-ctl-ring);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* Expand/collapse caret; points right, rotates down when the branch is open. */
|
|
45
|
+
:where([data-tree-item-indicator]) {
|
|
46
|
+
flex: none;
|
|
47
|
+
width: 0.62em;
|
|
48
|
+
height: 0.62em;
|
|
49
|
+
background: currentcolor;
|
|
50
|
+
opacity: 0.55;
|
|
51
|
+
clip-path: polygon(30% 15%, 30% 85%, 80% 50%);
|
|
52
|
+
transition: transform var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
|
|
53
|
+
}
|
|
54
|
+
:where([data-tree-item][data-state='expanded'] > [data-tree-item-row] [data-tree-item-indicator]) {
|
|
55
|
+
transform: rotate(90deg);
|
|
56
|
+
}
|
|
57
|
+
/* Keeps leaf labels aligned with branch labels. */
|
|
58
|
+
:where([data-tree-item-spacer]) {
|
|
59
|
+
flex: none;
|
|
60
|
+
width: 0.62em;
|
|
61
|
+
height: 0.62em;
|
|
62
|
+
}
|
|
63
|
+
:where([data-tree-item-label]) {
|
|
64
|
+
flex: 1;
|
|
65
|
+
min-width: 0;
|
|
66
|
+
overflow: hidden;
|
|
67
|
+
text-overflow: ellipsis;
|
|
68
|
+
white-space: nowrap;
|
|
69
|
+
}
|
|
70
|
+
}
|
package/dist/preset.css
CHANGED
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
@import './css/field.css';
|
|
19
19
|
@import './css/input.css';
|
|
20
20
|
@import './css/number-field.css';
|
|
21
|
+
@import './css/tags-input.css';
|
|
22
|
+
@import './css/image.css';
|
|
23
|
+
@import './css/file-upload.css';
|
|
21
24
|
@import './css/slider.css';
|
|
22
25
|
@import './css/hover-card.css';
|
|
23
26
|
@import './css/alert.css';
|
|
@@ -46,6 +49,7 @@
|
|
|
46
49
|
@import './css/menubar.css';
|
|
47
50
|
@import './css/navigation-menu.css';
|
|
48
51
|
@import './css/sidenav.css';
|
|
52
|
+
@import './css/tree-view.css';
|
|
49
53
|
@import './css/toast.css';
|
|
50
54
|
@import './css/command.css';
|
|
51
55
|
@import './css/tooltip.css';
|