@fea-ui/styles 0.1.0-alpha.6 → 0.1.0-alpha.7

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.
Files changed (10) hide show
  1. package/package.json +1 -1
  2. package/src/components/alert-dialog.css +1 -1
  3. package/src/components/button.css +12 -6
  4. package/src/components/checkbox.css +1 -1
  5. package/src/components/dialog.css +1 -1
  6. package/src/components/drawer.css +1 -1
  7. package/src/components/index.css +1 -0
  8. package/src/components/input.css +1 -1
  9. package/src/components/meter.css +1 -1
  10. package/src/components/popover.css +54 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fea-ui/styles",
3
- "version": "0.1.0-alpha.6",
3
+ "version": "0.1.0-alpha.7",
4
4
  "description": "FeaUI Styles - Tailwind CSS styles for FeaUI components",
5
5
  "keywords": [
6
6
  "fea-ui",
package/src/components/alert-dialog.css CHANGED
@@ -17,7 +17,7 @@
17
17
 
18
18
  @apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
19
19
 
20
- @apply transition-all motion-reduce:transition-none;
20
+ @apply transition-[scale,opacity] motion-reduce:transition-none;
21
21
 
22
22
  &[data-starting-style],
23
23
  &[data-ending-style] {
package/src/components/button.css CHANGED
@@ -6,12 +6,10 @@
6
6
 
7
7
  @apply w-fit px-4 py-4;
8
8
 
9
- @apply transition-all motion-reduce:transition-none;
9
+ @apply transition-[scale] motion-reduce:transition-none;
10
10
 
11
- @media (hover: hover) {
12
- &:hover:not([data-disabled]) {
13
- @apply brightness-90;
14
- }
11
+ &:hover:not([data-disabled]) {
12
+ @apply brightness-90;
15
13
  }
16
14
 
17
15
  &:active {
@@ -33,6 +31,10 @@
33
31
 
34
32
  .button--sm {
35
33
  @apply h-8 text-sm;
34
+
35
+ svg {
36
+ @apply size-4;
37
+ }
36
38
  }
37
39
 
38
40
  .button--md {
@@ -60,7 +62,11 @@
60
62
  }
61
63
 
62
64
  .button--ghost {
63
- @apply hover:bg-primary/10 border-0 bg-transparent;
65
+ @apply border-0 bg-transparent text-foreground;
66
+
67
+ &:hover:not([data-disabled]) {
68
+ @apply bg-secondary/10;
69
+ }
64
70
  }
65
71
 
66
72
  .button--icon-only {
package/src/components/checkbox.css CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  @apply size-6 outline-none;
6
6
 
7
- @apply transition-all motion-reduce:transition-none;
7
+ @apply transition-[visibility] motion-reduce:transition-none;
8
8
 
9
9
  &[data-unchecked] {
10
10
  @apply bg-input/50;
package/src/components/dialog.css CHANGED
@@ -17,7 +17,7 @@
17
17
 
18
18
  @apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
19
19
 
20
- @apply transition-all motion-reduce:transition-none;
20
+ @apply transition-[scale,opacity] motion-reduce:transition-none;
21
21
 
22
22
  &[data-starting-style],
23
23
  &[data-ending-style] {
package/src/components/drawer.css CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  @apply bg-card text-card-foreground shadow;
16
16
 
17
- @apply transition-all motion-reduce:transition-none;
17
+ @apply transition-[translate] motion-reduce:transition-none;
18
18
  }
19
19
 
20
20
  .drawer__title {
package/src/components/index.css CHANGED
@@ -27,3 +27,4 @@
27
27
  @import "./alert-dialog.css";
28
28
  @import "./fieldset.css";
29
29
  @import "./drawer.css";
30
+ @import "./popover.css";
package/src/components/input.css CHANGED
@@ -3,7 +3,7 @@
3
3
  @apply bg-input text-input-foreground rounded border;
4
4
  @apply w-full px-3 py-2;
5
5
 
6
- @apply transition-all motion-reduce:transition-none;
6
+ @apply transition-[brightness] motion-reduce:transition-none;
7
7
 
8
8
  @media (hover: hover) {
9
9
  &:hover:not([data-disabled]) {
package/src/components/meter.css CHANGED
@@ -18,7 +18,7 @@
18
18
  .meter__indicator {
19
19
  @apply block rounded;
20
20
 
21
- @apply transition-all motion-reduce:transition-none;
21
+ @apply transition-[width] motion-reduce:transition-none;
22
22
  }
23
23
 
24
24
  /** Variants */
package/src/components/popover.css ADDED
@@ -0,0 +1,54 @@
1
+ .popover__trigger {
2
+ @apply transition-[scale] motion-reduce:transition-none;
3
+
4
+ &[data-popup-open] {
5
+ @apply scale-95;
6
+ }
7
+ }
8
+
9
+ .popover__positioner {
10
+ width: var(--positioner-width);
11
+ max-width: var(--available-width);
12
+ height: var(--positioner-width);
13
+ }
14
+
15
+ .popover__popup {
16
+ @apply box-border p-3 rounded;
17
+
18
+ @apply bg-popover text-popover-foreground shadow;
19
+
20
+ @apply transition-[transform,scale] motion-reduce:transition-none;
21
+
22
+ &[data-starting-style],
23
+ &[data-ending-style] {
24
+ @apply opacity-0 scale-90;
25
+ }
26
+ }
27
+
28
+ .popover__arrow {
29
+ @apply flex text-popover size-6;
30
+
31
+ &[data-side="top"] {
32
+ @apply -bottom-3 rotate-180;
33
+ }
34
+
35
+ &[data-side="right"] {
36
+ @apply -start-3 rotate-90;
37
+ }
38
+
39
+ &[data-side="bottom"] {
40
+ @apply -top-3;
41
+ }
42
+
43
+ &[data-side="left"] {
44
+ @apply -end-3 -rotate-90;
45
+ }
46
+ }
47
+
48
+ .popover__title {
49
+ @apply text-lg font-medium;
50
+ }
51
+
52
+ .popover__description {
53
+ @apply text-sm text-muted-foreground;
54
+ }