@adn-ui/styles 0.0.0-canary-20260117164310 → 0.0.0-canary-20260118083400

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 (9) hide show
  1. package/package.json +1 -1
  2. package/src/components/alert-dialog.css +3 -3
  3. package/src/components/chip.css +4 -4
  4. package/src/components/collapsible.css +4 -0
  5. package/src/components/dialog.css +3 -3
  6. package/src/components/menu.css +25 -14
  7. package/src/components/navbar.css +34 -18
  8. package/src/components/popover.css +1 -1
  9. package/src/components/tooltip.css +12 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adn-ui/styles",
3
- "version": "0.0.0-canary-20260117164310",
3
+ "version": "0.0.0-canary-20260118083400",
4
4
  "description": "FeaUI Styles - Tailwind CSS styles for FeaUI components",
5
5
  "keywords": [
6
6
  "adn-ui",
package/src/components/alert-dialog.css CHANGED
@@ -19,12 +19,12 @@
19
19
 
20
20
  &[data-starting-style],
21
21
  &[data-ending-style] {
22
- @apply scale-95 opacity-0;
22
+ @apply scale-90 opacity-0;
23
23
  }
24
24
  }
25
25
 
26
26
  .alert-dialog__content {
27
- @apply bg-surface text-surface-foreground rounded border p-4 shadow;
27
+ @apply bg-surface text-surface-foreground relative rounded border p-4 shadow;
28
28
  }
29
29
 
30
30
  .alert-dialog__title {
@@ -38,7 +38,7 @@
38
38
  .alert-dialog__close {
39
39
  @apply cursor-pointer;
40
40
 
41
- @apply absolute top-3 right-5;
41
+ @apply absolute top-0 right-0 m-3;
42
42
 
43
43
  svg {
44
44
  @apply text-muted-foreground size-5;
package/src/components/chip.css CHANGED
@@ -1,18 +1,18 @@
1
1
  /** Base Styling */
2
2
  .chip {
3
- @apply inline-flex items-center justify-center gap-2 rounded-full border px-2 font-medium text-nowrap;
3
+ @apply inline-flex items-center justify-center gap-2 rounded-full border px-3 font-medium text-nowrap;
4
4
  }
5
5
 
6
6
  .chip--sm {
7
- @apply h-4 text-sm;
7
+ @apply h-6 text-sm;
8
8
  }
9
9
 
10
10
  .chip--md {
11
- @apply h-6;
11
+ @apply h-8;
12
12
  }
13
13
 
14
14
  .chip--lg {
15
- @apply h-8;
15
+ @apply h-10 text-lg;
16
16
  }
17
17
 
18
18
  .chip--primary {
package/src/components/collapsible.css CHANGED
@@ -34,3 +34,7 @@
34
34
  height: 0;
35
35
  }
36
36
  }
37
+
38
+ .collapsible__content {
39
+ @apply ms-3 px-3 py-2;
40
+ }
package/src/components/dialog.css CHANGED
@@ -20,12 +20,12 @@
20
20
 
21
21
  &[data-starting-style],
22
22
  &[data-ending-style] {
23
- @apply scale-95 opacity-0;
23
+ @apply scale-90 opacity-0;
24
24
  }
25
25
  }
26
26
 
27
27
  .dialog__content {
28
- @apply bg-surface text-surface-foreground rounded border p-4 shadow;
28
+ @apply bg-surface text-surface-foreground relative rounded border p-4 shadow;
29
29
  }
30
30
 
31
31
  .dialog__title {
@@ -39,7 +39,7 @@
39
39
  .dialog__close {
40
40
  @apply cursor-pointer;
41
41
 
42
- @apply absolute top-3 right-5;
42
+ @apply absolute top-0 right-0 m-3;
43
43
 
44
44
  svg {
45
45
  @apply text-muted-foreground size-5;
package/src/components/menu.css CHANGED
@@ -3,9 +3,11 @@
3
3
  }
4
4
 
5
5
  .menu__popup {
6
- @apply rounded p-3;
6
+ @apply rounded p-1;
7
7
 
8
- @apply bg-overlay text-overlay-foreground shadow;
8
+ @apply w-56;
9
+
10
+ @apply bg-overlay text-overlay-foreground border shadow;
9
11
 
10
12
  @apply transition-[transform,scale] motion-reduce:transition-none;
11
13
 
@@ -16,33 +18,42 @@
16
18
  }
17
19
 
18
20
  .menu__arrow {
19
- @apply text-overlay flex size-6;
21
+ clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
22
+
23
+ @apply bg-overlay size-2 border;
20
24
 
21
25
  &[data-side="top"] {
22
- @apply -bottom-3 rotate-180;
26
+ @apply -bottom-2 rotate-180;
23
27
  }
24
28
 
25
29
  &[data-side="right"] {
26
- @apply -start-3 rotate-90;
30
+ @apply -start-2 rotate-90;
27
31
  }
28
32
 
29
33
  &[data-side="bottom"] {
30
- @apply -top-3;
34
+ @apply -top-2;
31
35
  }
32
36
 
33
37
  &[data-side="left"] {
34
- @apply -end-3 -rotate-90;
38
+ @apply -end-2 -rotate-90;
35
39
  }
36
40
  }
37
41
 
38
- .menu__item {
39
- @apply relative flex cursor-pointer items-center rounded px-3 py-2 text-sm leading-none select-none;
42
+ .menu__item,
43
+ .menu__submenu__trigger {
44
+ @apply cursor-pointer;
40
45
 
41
- &:focus {
42
- @apply bg-secondary text-secondary-foreground outline-none;
43
- }
46
+ @apply bg-overlay hover-safe:bg-secondary hover-safe:text-secondary-foreground rounded shadow;
47
+
48
+ @apply flex items-center gap-2 px-2 py-1;
49
+
50
+ @apply transition-colors motion-reduce:transition-none;
51
+ }
52
+
53
+ .menu__group {
54
+ @apply mt-2 mb-1 px-1;
44
55
  }
45
56
 
46
- .autocomplete__separator {
47
- @apply bg-border my-2 h-px;
57
+ .menu__group-label {
58
+ @apply text-muted-foreground;
48
59
  }
package/src/components/navbar.css CHANGED
@@ -1,36 +1,52 @@
1
- /** Base Styling */
2
1
  .navbar {
3
- @apply bg-surface/50 border-border relative z-50 flex h-(--navbar-height) w-full items-center justify-between border-b px-4 py-2;
2
+ @apply bg-surface text-surface-foreground relative shadow;
4
3
  }
5
4
 
6
5
  .navbar__container {
7
- @apply mx-auto flex w-full max-w-7xl items-center justify-between;
6
+ @apply mx-auto max-w-7xl px-4;
7
+
8
+ @apply flex h-(--navbar-height) items-center justify-between;
8
9
  }
9
10
 
10
11
  .navbar__content {
11
- @apply flex items-center gap-2;
12
+ @apply flex items-center gap-4;
12
13
  }
13
14
 
14
- .navbar__toggle {
15
- @apply md:hidden;
15
+ .navbar__menu {
16
+ @apply absolute top-full right-0 left-0;
17
+ @apply h-96 w-full overflow-hidden;
16
18
 
17
- svg {
18
- @apply me-2 size-5;
19
- }
20
- }
19
+ @apply flex flex-col md:hidden;
21
20
 
22
- .navbar__list {
23
- @apply flex items-center gap-4;
24
- }
21
+ @apply bg-overlay/10 text-overlay-foreground shadow backdrop-blur-2xl;
25
22
 
26
- .navbar__list-item {
27
- @apply list-none;
23
+ @apply transition-[height] motion-reduce:transition-none;
28
24
  }
29
25
 
30
- .navbar__menu {
31
- @apply flex flex-col gap-1;
26
+ [data-open="true"] .navbar__menu {
27
+ @apply h-0;
32
28
  }
33
29
 
34
30
  .navbar__menu-item {
35
- @apply w-full list-none px-4 py-2;
31
+ @apply cursor-pointer;
32
+ @apply px-3 py-2;
33
+
34
+ @apply text-foreground hover-safe:bg-primary/10 hover-safe:text-primary;
35
+
36
+ @apply transition-[background-color,color] motion-reduce:transition-none;
37
+ }
38
+
39
+ .navbar__toggle {
40
+ @apply md:hidden;
41
+ @apply cursor-pointer;
42
+
43
+ svg {
44
+ @apply text-muted-foreground size-5;
45
+
46
+ @apply transition-colors motion-reduce:transition-none;
47
+
48
+ &:hover {
49
+ @apply text-foreground;
50
+ }
51
+ }
36
52
  }
package/src/components/popover.css CHANGED
@@ -7,7 +7,7 @@
7
7
  .popover__popup {
8
8
  @apply relative rounded px-3 py-2;
9
9
 
10
- @apply bg-overlay text-overlay-foreground shadow;
10
+ @apply bg-overlay text-overlay-foreground border shadow;
11
11
 
12
12
  @apply transition-[transform,scale] motion-reduce:transition-none;
13
13
 
package/src/components/tooltip.css CHANGED
@@ -7,11 +7,11 @@
7
7
  }
8
8
 
9
9
  .tooltip__popup {
10
- @apply rounded px-2 py-1 text-xs leading-none font-medium;
10
+ @apply px-3 py-2 text-sm leading-none font-medium;
11
11
 
12
- @apply bg-overlay-foreground text-overlay;
12
+ @apply bg-surface text-surface-foreground rounded border shadow;
13
13
 
14
- @apply transition-[transform,scale,opacity] motion-reduce:transition-none;
14
+ @apply transition-[scale,opacity] motion-reduce:transition-none;
15
15
 
16
16
  &[data-starting-style],
17
17
  &[data-ending-style] {
@@ -21,7 +21,7 @@
21
21
 
22
22
  .tooltip__arrow {
23
23
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
24
- @apply bg-overlay-foreground absolute z-50 size-2;
24
+ @apply bg-surface absolute z-50 size-2;
25
25
 
26
26
  &[data-side="top"] {
27
27
  @apply -bottom-1 rotate-180;
@@ -39,3 +39,11 @@
39
39
  @apply -end-1.5 -rotate-90;
40
40
  }
41
41
  }
42
+
43
+ .tooltip__title {
44
+ @apply font-medium;
45
+ }
46
+
47
+ .tooltip__description {
48
+ @apply text-muted-foreground text-sm;
49
+ }