lucentia-ui 0.2.15 → 0.2.16
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.
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
border: 2px solid transparent;
|
|
7
7
|
cursor: pointer;
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
|
|
10
10
|
|
|
11
11
|
transition:
|
|
12
12
|
box-shadow 0.2s ease,
|
|
@@ -17,11 +17,27 @@
|
|
|
17
17
|
|
|
18
18
|
/* ===== Variant ===== */
|
|
19
19
|
.ghost {
|
|
20
|
-
background: var(--color-surface);
|
|
20
|
+
background: var(--color-surface-container);
|
|
21
21
|
color: var(--color-on-surface);
|
|
22
22
|
}
|
|
23
|
-
|
|
23
|
+
|
|
24
|
+
.sm.ghost:hover:not(:disabled) {
|
|
25
|
+
border: 2px solid var(--color-border);
|
|
26
|
+
box-shadow:
|
|
27
|
+
0 0 2px var(--color-primary),
|
|
28
|
+
0 0 4px var(--color-primary);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.md.ghost:hover:not(:disabled) {
|
|
24
32
|
border: 2px solid var(--color-border);
|
|
33
|
+
box-shadow:
|
|
34
|
+
0 0 4px var(--color-shadow-d),
|
|
35
|
+
0 0 8px var(--color-shadow-d);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.sm.ghost:active:not(:disabled),
|
|
39
|
+
.md.ghost:active:not(:disabled) {
|
|
40
|
+
box-shadow: none;
|
|
25
41
|
}
|
|
26
42
|
|
|
27
43
|
|
|
@@ -44,13 +60,12 @@
|
|
|
44
60
|
0 0 8px var(--color-primary);
|
|
45
61
|
}
|
|
46
62
|
|
|
47
|
-
.
|
|
48
|
-
|
|
49
|
-
box-shadow:
|
|
50
|
-
0 0 4px var(--color-primary),
|
|
51
|
-
0 0 8px var(--color-primary);
|
|
63
|
+
.sm.primary:active:not(:disabled),
|
|
64
|
+
.md.primary:active:not(:disabled) {
|
|
65
|
+
box-shadow: none;
|
|
52
66
|
}
|
|
53
67
|
|
|
68
|
+
|
|
54
69
|
.secondary {
|
|
55
70
|
background: var(--color-secondary-container);
|
|
56
71
|
color: var(--color-on-secondary-container);
|
|
@@ -70,6 +85,14 @@
|
|
|
70
85
|
0 0 8px var(--color-secondary);
|
|
71
86
|
}
|
|
72
87
|
|
|
88
|
+
.sm.secondary:active:not(:disabled),
|
|
89
|
+
.md.secondary:active:not(:disabled) {
|
|
90
|
+
box-shadow: none;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.md.danger:active:not(:disabled) {
|
|
94
|
+
box-shadow: none;
|
|
95
|
+
}
|
|
73
96
|
|
|
74
97
|
.danger {
|
|
75
98
|
background: var(--color-error-container);
|
|
@@ -90,6 +113,7 @@
|
|
|
90
113
|
0 0 8px var(--color-error);
|
|
91
114
|
}
|
|
92
115
|
|
|
116
|
+
.sm.danger:active:not(:disabled),
|
|
93
117
|
.md.danger:active:not(:disabled) {
|
|
94
118
|
box-shadow: none;
|
|
95
119
|
}
|
|
@@ -101,12 +125,14 @@
|
|
|
101
125
|
padding: var(--space-xs) var(--space-lg);
|
|
102
126
|
font-size: var(--font-size-14);
|
|
103
127
|
box-shadow: var(--shadow-sm);
|
|
128
|
+
border-radius: var(--radius-sm);
|
|
104
129
|
}
|
|
105
130
|
|
|
106
131
|
.md {
|
|
107
132
|
padding: var(--space-sm) var(--space-2xl);
|
|
108
133
|
font-size: var(--font-size-16);
|
|
109
134
|
box-shadow: var(--shadow-md);
|
|
135
|
+
border-radius: var(--radius-sm);
|
|
110
136
|
}
|
|
111
137
|
|
|
112
138
|
|
|
@@ -117,13 +143,6 @@
|
|
|
117
143
|
|
|
118
144
|
/* ===== State ===== */
|
|
119
145
|
|
|
120
|
-
.sm.button:active:not(:disabled),
|
|
121
|
-
.md.button:active:not(:disabled),
|
|
122
|
-
.button[data-state="pressed"] {
|
|
123
|
-
|
|
124
|
-
box-shadow: none;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
146
|
.button:focus-visible {
|
|
128
147
|
outline: none;
|
|
129
148
|
}
|
|
@@ -36,7 +36,7 @@ export const State = {
|
|
|
36
36
|
flexDirection: "column",
|
|
37
37
|
alignItems: "flex-start",
|
|
38
38
|
gap: 32,
|
|
39
|
-
}, children: [_jsx(Button, { variant: "ghost", children: "Default" }), _jsx(Button, { variant: "ghost", "data-state": "pressed", children: "Pressed" }), _jsx(Button, { variant: "ghost", disabled: true, children: "Disabled" })] })),
|
|
39
|
+
}, children: [_jsx(Button, { variant: "ghost", children: "Default" }), _jsx(Button, { variant: "ghost", style: { boxShadow: "none" }, "data-state": "pressed", children: "Pressed" }), _jsx(Button, { variant: "ghost", disabled: true, children: "Disabled" })] })),
|
|
40
40
|
};
|
|
41
41
|
export const Variants = {
|
|
42
42
|
render: () => (_jsxs("div", { style: {
|
|
@@ -14,13 +14,14 @@
|
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
|
|
17
|
-
.menuLink
|
|
17
|
+
.menuLink{
|
|
18
18
|
display: flex;
|
|
19
19
|
align-items: center;
|
|
20
20
|
gap: var(--space-sm);
|
|
21
21
|
width: 100%;
|
|
22
22
|
height: 100%;
|
|
23
23
|
|
|
24
|
+
font-family: var(--font);
|
|
24
25
|
font-weight: var(--font-weight-medium);
|
|
25
26
|
text-decoration: none;
|
|
26
27
|
color: var(--color-on-surface);
|
|
@@ -31,6 +32,8 @@
|
|
|
31
32
|
box-shadow: var(--shadow-sm);
|
|
32
33
|
}
|
|
33
34
|
|
|
35
|
+
|
|
36
|
+
|
|
34
37
|
.menuLink:hover{
|
|
35
38
|
background: var(--color-surface-container);
|
|
36
39
|
}
|
package/package.json
CHANGED