frutjam 0.2.0-alpha.4 → 0.3.0-alpha.2
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/package.json +1 -1
- package/src/base/preflight.css +5 -1
- package/src/components/accordion.css +1 -1
- package/src/components/button.css +1 -1
- package/src/components/drawer.css +89 -0
- package/src/components/modal.css +24 -55
- package/src/components/popover.css +99 -0
- package/src/main.css +1 -0
- package/src/themes/animation/slide.css +6 -0
- package/src/themes/colors/base.css +2 -1
- package/src/themes/colors/dark.css +4 -4
- package/src/themes/colors/light.css +1 -1
- package/src/themes/placement.css +8 -0
package/package.json
CHANGED
package/src/base/preflight.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@import '../themes/colors/base.css';
|
|
2
2
|
@utility accordion {
|
|
3
3
|
@layer components {
|
|
4
|
-
@apply grid divide-y divide-
|
|
4
|
+
@apply grid divide-y divide-info border border-info cursor-pointer rounded-md;
|
|
5
5
|
|
|
6
6
|
&>details {
|
|
7
7
|
@apply text-pretty;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@import '../themes/colors/base.css';
|
|
2
2
|
@utility btn {
|
|
3
3
|
@layer components {
|
|
4
|
-
@apply text-[buttonFace] flex items-center text-center rounded-lg font-medium cursor-pointer relative overflow-hidden text-xs transition duration-300 ring ring-black/40 inset-ring inset-ring-black/20;
|
|
4
|
+
@apply text-[buttonFace] flex items-center text-center rounded-lg font-medium cursor-pointer relative overflow-hidden text-xs transition duration-300 ring ring-black/40 inset-ring inset-ring-black/20 text-center;
|
|
5
5
|
|
|
6
6
|
&:focus{
|
|
7
7
|
@apply inset-ring-black/10;
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
@import "../themes/colors/base.css";
|
|
2
|
+
@utility drawer {
|
|
3
|
+
@layer components {
|
|
4
|
+
@apply pointer-events-none invisible absolute inset-0 m-0 grid h-full max-h-none w-full max-w-none place-items-start bg-transparent p-0 text-inherit z-999 overflow-hidden overscroll-contain;
|
|
5
|
+
|
|
6
|
+
&:not(drawer:not([open]):not(.drawer-open)),
|
|
7
|
+
&::backdrop {
|
|
8
|
+
@apply opacity-100 starting:invisible starting:opacity-0 bg-backdrop;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
&[open], &.drawer-open{
|
|
12
|
+
@apply pointer-events-auto visible opacity-100 starting:invisible starting:opacity-0;
|
|
13
|
+
|
|
14
|
+
.drawer-body {
|
|
15
|
+
translate: 0 0;
|
|
16
|
+
scale: 1;
|
|
17
|
+
opacity: 1;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@utility drawer-backdrop {
|
|
24
|
+
@layer components {
|
|
25
|
+
@apply col-start-1 row-start-1 grid self-stretch justify-self-stretch text-transparent -z-1;
|
|
26
|
+
button {
|
|
27
|
+
@apply cursor-pointer;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@utility drawer-body {
|
|
33
|
+
@layer components {
|
|
34
|
+
@apply bg-surface text-surface-content rounded-none border border-black/60 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 h-screen max-h-none w-11/12 w-auto max-w-none p-6 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
|
|
35
|
+
translate: -100% 0;
|
|
36
|
+
scale: 1;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
@utility drawer-top {
|
|
42
|
+
@layer components {
|
|
43
|
+
@apply place-items-start;
|
|
44
|
+
|
|
45
|
+
:where(.drawer-body) {
|
|
46
|
+
@apply h-auto w-full max-w-none rounded-none;
|
|
47
|
+
max-height: calc(100vh - 5em);
|
|
48
|
+
translate: 0 -100%;
|
|
49
|
+
scale: 1;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@utility drawer-bottom {
|
|
55
|
+
@layer components {
|
|
56
|
+
@apply place-items-end;
|
|
57
|
+
|
|
58
|
+
:where(.drawer-body) {
|
|
59
|
+
@apply h-auto w-full max-w-none rounded-none;
|
|
60
|
+
max-height: calc(100vh - 5em);
|
|
61
|
+
translate: 0 100%;
|
|
62
|
+
scale: 1;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@utility drawer-start {
|
|
68
|
+
@layer components {
|
|
69
|
+
@apply place-items-start;
|
|
70
|
+
|
|
71
|
+
:where(.drawer-body) {
|
|
72
|
+
@apply h-screen max-h-none w-auto max-w-none rounded-none;
|
|
73
|
+
translate: -100% 0;
|
|
74
|
+
scale: 1;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
@utility drawer-end {
|
|
80
|
+
@layer components {
|
|
81
|
+
@apply place-items-end;
|
|
82
|
+
|
|
83
|
+
:where(.drawer-body) {
|
|
84
|
+
@apply h-screen max-h-none w-auto max-w-none rounded-none;
|
|
85
|
+
translate: 100% 0;
|
|
86
|
+
scale: 1;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
package/src/components/modal.css
CHANGED
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
@import "../themes/colors/base.css";
|
|
2
|
-
@
|
|
2
|
+
@import "../themes/placement.css";
|
|
3
|
+
@import "../themes/animation/slide.css";
|
|
4
|
+
|
|
5
|
+
@utility modal{
|
|
3
6
|
@layer components {
|
|
4
|
-
@apply pointer-events-none invisible fixed inset-0 m-0 grid h-full max-h-none w-full max-w-none items-center justify-items-center bg-transparent p-
|
|
7
|
+
@apply pointer-events-none invisible fixed inset-0 m-0 grid h-full max-h-none w-full max-w-none items-center justify-items-center bg-transparent p-3 text-inherit z-999 overflow-hidden overscroll-contain;
|
|
5
8
|
|
|
6
|
-
&:not(modal:not([
|
|
9
|
+
&:not(modal:not([open]):not(.modal-open)),
|
|
7
10
|
&::backdrop {
|
|
8
|
-
@apply opacity-100 starting:invisible starting:opacity-0 bg-backdrop
|
|
11
|
+
@apply opacity-100 starting:invisible starting:opacity-0 bg-backdrop;
|
|
9
12
|
}
|
|
10
13
|
|
|
11
|
-
&[
|
|
14
|
+
&[open], &.modal-open {
|
|
12
15
|
@apply pointer-events-auto visible opacity-100 starting:invisible starting:opacity-0;
|
|
13
16
|
|
|
14
17
|
.modal-body {
|
|
@@ -31,69 +34,35 @@
|
|
|
31
34
|
|
|
32
35
|
@utility modal-body {
|
|
33
36
|
@layer components {
|
|
34
|
-
@apply bg-surface rounded-
|
|
37
|
+
@apply bg-surface text-surface-content rounded-2xl border border-black/60 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 max-h-screen w-11/12 max-w-[32rem] p-6 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
|
|
35
38
|
}
|
|
36
39
|
}
|
|
37
40
|
|
|
38
|
-
@utility modal-top {
|
|
39
|
-
@layer components {
|
|
40
|
-
@apply place-items-start;
|
|
41
|
-
|
|
42
|
-
:where(.modal-body) {
|
|
43
|
-
@apply h-auto w-full max-w-none rounded-none;
|
|
44
|
-
max-height: calc(100vh - 5em);
|
|
45
|
-
translate: 0 -100%;
|
|
46
|
-
scale: 1;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
41
|
|
|
51
|
-
@utility modal-middle {
|
|
52
|
-
@layer components {
|
|
53
|
-
@apply place-items-center;
|
|
54
42
|
|
|
55
|
-
|
|
56
|
-
@apply h-auto w-11/12 max-w-[32rem];
|
|
57
|
-
max-height: calc(100vh - 5em);
|
|
58
|
-
translate: 0 2%;
|
|
59
|
-
scale: 98%;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
}
|
|
43
|
+
/* placements */
|
|
63
44
|
|
|
64
|
-
@utility modal-
|
|
45
|
+
@utility modal-x-* {
|
|
65
46
|
@layer components {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
:where(.modal-body) {
|
|
69
|
-
@apply h-auto w-full max-w-none rounded-none;
|
|
70
|
-
max-height: calc(100vh - 5em);
|
|
71
|
-
translate: 0 100%;
|
|
72
|
-
scale: 1;
|
|
73
|
-
}
|
|
47
|
+
/* @apply [justify-items:--value([*])]; */
|
|
48
|
+
@apply [justify-items:--value(--x-*)];
|
|
74
49
|
}
|
|
75
50
|
}
|
|
76
51
|
|
|
77
|
-
@utility modal-
|
|
52
|
+
@utility modal-y-* {
|
|
78
53
|
@layer components {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
:where(.modal-body) {
|
|
82
|
-
@apply h-screen max-h-none w-auto max-w-none rounded-none;
|
|
83
|
-
translate: -100% 0;
|
|
84
|
-
scale: 1;
|
|
85
|
-
}
|
|
54
|
+
/* @apply [align-items:--value([*])]; */
|
|
55
|
+
@apply [align-items:--value(--y-*)];
|
|
86
56
|
}
|
|
87
57
|
}
|
|
88
58
|
|
|
89
|
-
|
|
90
|
-
@layer components {
|
|
91
|
-
@apply place-items-end;
|
|
59
|
+
/* animation */
|
|
92
60
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
61
|
+
@utility modal-slide-* {
|
|
62
|
+
@layer components {
|
|
63
|
+
:where(.modal-body) {
|
|
64
|
+
@apply [translate:--value(--slide-*)];
|
|
65
|
+
scale: 1;
|
|
66
|
+
}
|
|
98
67
|
}
|
|
99
|
-
}
|
|
68
|
+
}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
@import "../themes/colors/base.css";
|
|
2
|
+
@utility modal {
|
|
3
|
+
@layer components {
|
|
4
|
+
@apply pointer-events-none invisible fixed inset-0 m-0 grid h-full max-h-none w-full max-w-none items-center justify-items-center bg-transparent p-0 text-inherit z-999 overflow-hidden overscroll-contain;
|
|
5
|
+
|
|
6
|
+
&:not(modal:not([popover]:popover-open)),
|
|
7
|
+
&::backdrop {
|
|
8
|
+
@apply opacity-100 starting:invisible starting:opacity-0 bg-backdrop;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
&[popover]:popover-open {
|
|
12
|
+
@apply pointer-events-auto visible opacity-100 starting:invisible starting:opacity-0;
|
|
13
|
+
|
|
14
|
+
.modal-body {
|
|
15
|
+
translate: 0 0;
|
|
16
|
+
scale: 1;
|
|
17
|
+
opacity: 1;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@utility modal-backdrop {
|
|
24
|
+
@layer components {
|
|
25
|
+
@apply col-start-1 row-start-1 grid self-stretch justify-self-stretch text-transparent -z-1;
|
|
26
|
+
button {
|
|
27
|
+
@apply cursor-pointer;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@utility modal-body {
|
|
33
|
+
@layer components {
|
|
34
|
+
@apply bg-surface text-surface-content rounded-3xl border border-black/60 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 max-h-screen w-11/12 max-w-[32rem] p-6 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@utility modal-top {
|
|
39
|
+
@layer components {
|
|
40
|
+
@apply place-items-start;
|
|
41
|
+
|
|
42
|
+
:where(.modal-body) {
|
|
43
|
+
@apply h-auto w-full max-w-none rounded-none;
|
|
44
|
+
max-height: calc(100vh - 5em);
|
|
45
|
+
translate: 0 -100%;
|
|
46
|
+
scale: 1;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@utility modal-middle {
|
|
52
|
+
@layer components {
|
|
53
|
+
@apply place-items-center;
|
|
54
|
+
|
|
55
|
+
:where(.modal-body) {
|
|
56
|
+
@apply h-auto w-11/12 max-w-[32rem];
|
|
57
|
+
max-height: calc(100vh - 5em);
|
|
58
|
+
translate: 0 2%;
|
|
59
|
+
scale: 98%;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
@utility modal-bottom {
|
|
65
|
+
@layer components {
|
|
66
|
+
@apply place-items-end;
|
|
67
|
+
|
|
68
|
+
:where(.modal-body) {
|
|
69
|
+
@apply h-auto w-full max-w-none rounded-none;
|
|
70
|
+
max-height: calc(100vh - 5em);
|
|
71
|
+
translate: 0 100%;
|
|
72
|
+
scale: 1;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
@utility modal-start {
|
|
78
|
+
@layer components {
|
|
79
|
+
@apply place-items-start;
|
|
80
|
+
|
|
81
|
+
:where(.modal-body) {
|
|
82
|
+
@apply h-screen max-h-none w-auto max-w-none rounded-none;
|
|
83
|
+
translate: -100% 0;
|
|
84
|
+
scale: 1;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
@utility modal-end {
|
|
90
|
+
@layer components {
|
|
91
|
+
@apply place-items-end;
|
|
92
|
+
|
|
93
|
+
:where(.modal-body) {
|
|
94
|
+
@apply h-screen max-h-none w-auto max-w-none rounded-none;
|
|
95
|
+
translate: 100% 0;
|
|
96
|
+
scale: 1;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
package/src/main.css
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@import "../../base/preflight.css" layer(theme);
|
|
1
2
|
@import "./light.css" layer(theme);
|
|
2
3
|
@import "./dark.css" layer(theme);
|
|
3
4
|
|
|
@@ -13,7 +14,7 @@
|
|
|
13
14
|
--color-backdrop: var(--backdrop-color);
|
|
14
15
|
|
|
15
16
|
--color-surface: var(--surface-color);
|
|
16
|
-
--color-surface-content: var(--
|
|
17
|
+
--color-surface-content: var(--surface-content-color);
|
|
17
18
|
|
|
18
19
|
--color-primary: var(--primary-color);
|
|
19
20
|
--color-primary-content: var(--primary-content-color);
|
|
@@ -4,19 +4,19 @@
|
|
|
4
4
|
|
|
5
5
|
--backdrop-color: color-mix(in oklab,oklch(.141 .005 265.823)20%,transparent);
|
|
6
6
|
|
|
7
|
-
--surface-color: oklch(
|
|
8
|
-
--
|
|
7
|
+
--surface-color: oklch(0.216 0.006 56.043);
|
|
8
|
+
--surface-content-color: oklch(100% 0 0);
|
|
9
9
|
|
|
10
10
|
--primary-color: oklch(15.72% 0.0267 199.35);
|
|
11
11
|
--primary-content-color: oklch(0.961151 0.003 300.98);
|
|
12
12
|
|
|
13
|
-
--secondary-color: oklch(22
|
|
13
|
+
--secondary-color: oklch(0.22 0 0);
|
|
14
14
|
--secondary-content-color: oklch(100% 0 0);
|
|
15
15
|
|
|
16
16
|
--accent-color: oklch(24.47% 0.0416 202.69);
|
|
17
17
|
--accent-content-color: oklch(100% 0 0);
|
|
18
18
|
|
|
19
|
-
--info-color: oklch(
|
|
19
|
+
--info-color: oklch(0.268 0.007 34.298);
|
|
20
20
|
--info-content-color: oklch(99.78% 0.0105 106.59);
|
|
21
21
|
|
|
22
22
|
--success-color: oklch(45.77% 0.155081 142.3128);
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
--backdrop-color: color-mix(in oklab,oklch(.141 .005 285.823)20%,transparent);
|
|
6
6
|
|
|
7
7
|
--surface-color: oklch(100% 0 0);
|
|
8
|
-
--
|
|
8
|
+
--surface-content-color: oklch(15.72% 0.0267 199.35);
|
|
9
9
|
|
|
10
10
|
--primary-color: oklch(15.72% 0.0267 199.35);
|
|
11
11
|
--primary-content-color: oklch(0.961151 0.003 300.98);
|