@unciatech/file-manager 0.0.14 → 0.0.15
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/styles.css +71 -52
- package/package.json +1 -1
- package/styles.css +71 -52
package/dist/styles.css
CHANGED
|
@@ -1,69 +1,88 @@
|
|
|
1
1
|
/* @unciatech/file-manager — base styles
|
|
2
|
-
* Import this
|
|
3
|
-
*
|
|
2
|
+
* Import this in your root layout to provide the CSS variables the
|
|
3
|
+
* file manager components depend on.
|
|
4
4
|
*
|
|
5
5
|
* Usage: import '@unciatech/file-manager/styles';
|
|
6
|
+
*
|
|
7
|
+
* How it works with Tailwind v4:
|
|
8
|
+
* Tailwind utility classes (e.g. bg-primary) resolve to var(--color-primary).
|
|
9
|
+
* This file defines those --color-* variables directly so they work in any
|
|
10
|
+
* consumer app without needing a @theme block or additional Tailwind config.
|
|
6
11
|
*/
|
|
7
12
|
|
|
8
|
-
/* ── Light mode
|
|
13
|
+
/* ── Light mode ───────────────────────────────────────────────── */
|
|
9
14
|
:root {
|
|
10
|
-
--
|
|
11
|
-
--
|
|
12
|
-
--
|
|
13
|
-
--
|
|
14
|
-
--
|
|
15
|
-
--
|
|
16
|
-
--
|
|
17
|
-
--
|
|
18
|
-
--
|
|
19
|
-
--
|
|
20
|
-
--
|
|
21
|
-
--
|
|
22
|
-
--
|
|
23
|
-
--
|
|
24
|
-
--
|
|
25
|
-
--
|
|
26
|
-
--
|
|
27
|
-
--
|
|
28
|
-
--
|
|
29
|
-
--
|
|
15
|
+
--color-background: #ffffff;
|
|
16
|
+
--color-foreground: #09090b; /* zinc-950 */
|
|
17
|
+
--color-card: #ffffff;
|
|
18
|
+
--color-card-foreground: #09090b;
|
|
19
|
+
--color-popover: #ffffff;
|
|
20
|
+
--color-popover-foreground:#09090b;
|
|
21
|
+
--color-primary: #3b82f6; /* blue-500 */
|
|
22
|
+
--color-primary-foreground:#ffffff;
|
|
23
|
+
--color-secondary: #f4f4f5; /* zinc-100 */
|
|
24
|
+
--color-secondary-foreground:#18181b;
|
|
25
|
+
--color-muted: #f4f4f5;
|
|
26
|
+
--color-muted-foreground: #71717a; /* zinc-500 */
|
|
27
|
+
--color-accent: #f4f4f5;
|
|
28
|
+
--color-accent-foreground: #18181b;
|
|
29
|
+
--color-destructive: #dc2626; /* red-600 */
|
|
30
|
+
--color-destructive-foreground:#ffffff;
|
|
31
|
+
--color-border: oklch(94% 0.004 286.32);
|
|
32
|
+
--color-input: #e4e4e7; /* zinc-200 */
|
|
33
|
+
--color-ring: #a1a1aa; /* zinc-400 */
|
|
34
|
+
--radius: 0.5rem;
|
|
30
35
|
}
|
|
31
36
|
|
|
32
|
-
/* ── Dark mode
|
|
37
|
+
/* ── Dark mode ────────────────────────────────────────────────── */
|
|
33
38
|
.dark {
|
|
34
|
-
--
|
|
35
|
-
--
|
|
36
|
-
--
|
|
37
|
-
--
|
|
38
|
-
--
|
|
39
|
-
--
|
|
40
|
-
--
|
|
41
|
-
--
|
|
42
|
-
--
|
|
43
|
-
--
|
|
44
|
-
--
|
|
45
|
-
--
|
|
46
|
-
--
|
|
47
|
-
--
|
|
48
|
-
--
|
|
49
|
-
--
|
|
50
|
-
--
|
|
51
|
-
--
|
|
52
|
-
--
|
|
39
|
+
--color-background: #09090b; /* zinc-950 */
|
|
40
|
+
--color-foreground: #fafafa; /* zinc-50 */
|
|
41
|
+
--color-card: #09090b;
|
|
42
|
+
--color-card-foreground: #fafafa;
|
|
43
|
+
--color-popover: #09090b;
|
|
44
|
+
--color-popover-foreground:#fafafa;
|
|
45
|
+
--color-primary: #2563eb; /* blue-600 */
|
|
46
|
+
--color-primary-foreground:#ffffff;
|
|
47
|
+
--color-secondary: #27272a; /* zinc-800 */
|
|
48
|
+
--color-secondary-foreground:#fafafa;
|
|
49
|
+
--color-muted: #18181b; /* zinc-900 */
|
|
50
|
+
--color-muted-foreground: #71717a;
|
|
51
|
+
--color-accent: #18181b;
|
|
52
|
+
--color-accent-foreground: #fafafa;
|
|
53
|
+
--color-destructive: #dc2626;
|
|
54
|
+
--color-destructive-foreground:#ffffff;
|
|
55
|
+
--color-border: #27272a; /* zinc-800 */
|
|
56
|
+
--color-input: #27272a;
|
|
57
|
+
--color-ring: #52525b; /* zinc-600 */
|
|
53
58
|
}
|
|
54
59
|
|
|
55
|
-
/* ──
|
|
56
|
-
|
|
57
|
-
|
|
60
|
+
/* ── Border base reset ────────────────────────────────────────── */
|
|
61
|
+
*, *::before, *::after {
|
|
62
|
+
border-color: var(--color-border);
|
|
58
63
|
}
|
|
59
|
-
|
|
60
|
-
|
|
64
|
+
|
|
65
|
+
/* ── Focus ring ───────────────────────────────────────────────── */
|
|
66
|
+
/* Suppress the thick native browser outline on all elements */
|
|
67
|
+
*:focus-visible {
|
|
68
|
+
outline: 2px solid var(--color-ring);
|
|
69
|
+
outline-offset: 2px;
|
|
70
|
+
box-shadow: none;
|
|
61
71
|
}
|
|
62
|
-
|
|
63
|
-
|
|
72
|
+
|
|
73
|
+
/* ── Scrollbar ────────────────────────────────────────────────── */
|
|
74
|
+
::-webkit-scrollbar { width: 5px; }
|
|
75
|
+
::-webkit-scrollbar-track { background: transparent; }
|
|
76
|
+
::-webkit-scrollbar-thumb {
|
|
77
|
+
background: var(--color-input);
|
|
64
78
|
border-radius: 5px;
|
|
65
79
|
}
|
|
66
|
-
|
|
80
|
+
* {
|
|
67
81
|
scrollbar-width: thin;
|
|
68
|
-
scrollbar-color: var(--
|
|
82
|
+
scrollbar-color: var(--color-input) transparent;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* ── Smooth scroll ────────────────────────────────────────────── */
|
|
86
|
+
html {
|
|
87
|
+
scroll-behavior: smooth;
|
|
69
88
|
}
|
package/package.json
CHANGED
package/styles.css
CHANGED
|
@@ -1,69 +1,88 @@
|
|
|
1
1
|
/* @unciatech/file-manager — base styles
|
|
2
|
-
* Import this
|
|
3
|
-
*
|
|
2
|
+
* Import this in your root layout to provide the CSS variables the
|
|
3
|
+
* file manager components depend on.
|
|
4
4
|
*
|
|
5
5
|
* Usage: import '@unciatech/file-manager/styles';
|
|
6
|
+
*
|
|
7
|
+
* How it works with Tailwind v4:
|
|
8
|
+
* Tailwind utility classes (e.g. bg-primary) resolve to var(--color-primary).
|
|
9
|
+
* This file defines those --color-* variables directly so they work in any
|
|
10
|
+
* consumer app without needing a @theme block or additional Tailwind config.
|
|
6
11
|
*/
|
|
7
12
|
|
|
8
|
-
/* ── Light mode
|
|
13
|
+
/* ── Light mode ───────────────────────────────────────────────── */
|
|
9
14
|
:root {
|
|
10
|
-
--
|
|
11
|
-
--
|
|
12
|
-
--
|
|
13
|
-
--
|
|
14
|
-
--
|
|
15
|
-
--
|
|
16
|
-
--
|
|
17
|
-
--
|
|
18
|
-
--
|
|
19
|
-
--
|
|
20
|
-
--
|
|
21
|
-
--
|
|
22
|
-
--
|
|
23
|
-
--
|
|
24
|
-
--
|
|
25
|
-
--
|
|
26
|
-
--
|
|
27
|
-
--
|
|
28
|
-
--
|
|
29
|
-
--
|
|
15
|
+
--color-background: #ffffff;
|
|
16
|
+
--color-foreground: #09090b; /* zinc-950 */
|
|
17
|
+
--color-card: #ffffff;
|
|
18
|
+
--color-card-foreground: #09090b;
|
|
19
|
+
--color-popover: #ffffff;
|
|
20
|
+
--color-popover-foreground:#09090b;
|
|
21
|
+
--color-primary: #3b82f6; /* blue-500 */
|
|
22
|
+
--color-primary-foreground:#ffffff;
|
|
23
|
+
--color-secondary: #f4f4f5; /* zinc-100 */
|
|
24
|
+
--color-secondary-foreground:#18181b;
|
|
25
|
+
--color-muted: #f4f4f5;
|
|
26
|
+
--color-muted-foreground: #71717a; /* zinc-500 */
|
|
27
|
+
--color-accent: #f4f4f5;
|
|
28
|
+
--color-accent-foreground: #18181b;
|
|
29
|
+
--color-destructive: #dc2626; /* red-600 */
|
|
30
|
+
--color-destructive-foreground:#ffffff;
|
|
31
|
+
--color-border: oklch(94% 0.004 286.32);
|
|
32
|
+
--color-input: #e4e4e7; /* zinc-200 */
|
|
33
|
+
--color-ring: #a1a1aa; /* zinc-400 */
|
|
34
|
+
--radius: 0.5rem;
|
|
30
35
|
}
|
|
31
36
|
|
|
32
|
-
/* ── Dark mode
|
|
37
|
+
/* ── Dark mode ────────────────────────────────────────────────── */
|
|
33
38
|
.dark {
|
|
34
|
-
--
|
|
35
|
-
--
|
|
36
|
-
--
|
|
37
|
-
--
|
|
38
|
-
--
|
|
39
|
-
--
|
|
40
|
-
--
|
|
41
|
-
--
|
|
42
|
-
--
|
|
43
|
-
--
|
|
44
|
-
--
|
|
45
|
-
--
|
|
46
|
-
--
|
|
47
|
-
--
|
|
48
|
-
--
|
|
49
|
-
--
|
|
50
|
-
--
|
|
51
|
-
--
|
|
52
|
-
--
|
|
39
|
+
--color-background: #09090b; /* zinc-950 */
|
|
40
|
+
--color-foreground: #fafafa; /* zinc-50 */
|
|
41
|
+
--color-card: #09090b;
|
|
42
|
+
--color-card-foreground: #fafafa;
|
|
43
|
+
--color-popover: #09090b;
|
|
44
|
+
--color-popover-foreground:#fafafa;
|
|
45
|
+
--color-primary: #2563eb; /* blue-600 */
|
|
46
|
+
--color-primary-foreground:#ffffff;
|
|
47
|
+
--color-secondary: #27272a; /* zinc-800 */
|
|
48
|
+
--color-secondary-foreground:#fafafa;
|
|
49
|
+
--color-muted: #18181b; /* zinc-900 */
|
|
50
|
+
--color-muted-foreground: #71717a;
|
|
51
|
+
--color-accent: #18181b;
|
|
52
|
+
--color-accent-foreground: #fafafa;
|
|
53
|
+
--color-destructive: #dc2626;
|
|
54
|
+
--color-destructive-foreground:#ffffff;
|
|
55
|
+
--color-border: #27272a; /* zinc-800 */
|
|
56
|
+
--color-input: #27272a;
|
|
57
|
+
--color-ring: #52525b; /* zinc-600 */
|
|
53
58
|
}
|
|
54
59
|
|
|
55
|
-
/* ──
|
|
56
|
-
|
|
57
|
-
|
|
60
|
+
/* ── Border base reset ────────────────────────────────────────── */
|
|
61
|
+
*, *::before, *::after {
|
|
62
|
+
border-color: var(--color-border);
|
|
58
63
|
}
|
|
59
|
-
|
|
60
|
-
|
|
64
|
+
|
|
65
|
+
/* ── Focus ring ───────────────────────────────────────────────── */
|
|
66
|
+
/* Suppress the thick native browser outline on all elements */
|
|
67
|
+
*:focus-visible {
|
|
68
|
+
outline: 2px solid var(--color-ring);
|
|
69
|
+
outline-offset: 2px;
|
|
70
|
+
box-shadow: none;
|
|
61
71
|
}
|
|
62
|
-
|
|
63
|
-
|
|
72
|
+
|
|
73
|
+
/* ── Scrollbar ────────────────────────────────────────────────── */
|
|
74
|
+
::-webkit-scrollbar { width: 5px; }
|
|
75
|
+
::-webkit-scrollbar-track { background: transparent; }
|
|
76
|
+
::-webkit-scrollbar-thumb {
|
|
77
|
+
background: var(--color-input);
|
|
64
78
|
border-radius: 5px;
|
|
65
79
|
}
|
|
66
|
-
|
|
80
|
+
* {
|
|
67
81
|
scrollbar-width: thin;
|
|
68
|
-
scrollbar-color: var(--
|
|
82
|
+
scrollbar-color: var(--color-input) transparent;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* ── Smooth scroll ────────────────────────────────────────────── */
|
|
86
|
+
html {
|
|
87
|
+
scroll-behavior: smooth;
|
|
69
88
|
}
|