@adn-ui/styles 0.0.0-canary-20260117170604 → 0.0.0-canary-20260118085858

package/README.md

@@ -1,3 +1,3 @@
-# FeaUI Styles
+# AdnUI Styles
 
-This package contains the core styles and design tokens for the FeaUI component library. It provides a consistent look and feel across all components and can be easily integrated into your projects.
+This package contains the core styles and design tokens for the AdnUI component library. It provides a consistent look and feel across all components and can be easily integrated into your projects.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adn-ui/styles",
-  "version": "0.0.0-canary-20260117170604",
-  "description": "FeaUI Styles - Tailwind CSS styles for FeaUI components",
+  "version": "0.0.0-canary-20260118085858",
+  "description": "AdnUI Styles - Tailwind CSS styles for AdnUI components",
   "keywords": [
     "adn-ui",
     "components",

package/src/components/alert-dialog.css

@@ -19,12 +19,12 @@
 
   &[data-starting-style],
   &[data-ending-style] {
-    @apply scale-95 opacity-0;
+    @apply scale-90 opacity-0;
   }
 }
 
 .alert-dialog__content {
-  @apply bg-surface text-surface-foreground rounded border p-4 shadow;
+  @apply bg-surface text-surface-foreground relative rounded border p-4 shadow;
 }
 
 .alert-dialog__title {
@@ -38,7 +38,7 @@
 .alert-dialog__close {
   @apply cursor-pointer;
 
-  @apply absolute top-3 right-5;
+  @apply absolute top-0 right-0 m-3;
 
   svg {
     @apply text-muted-foreground size-5;

package/src/components/chip.css

@@ -1,18 +1,18 @@
 /** Base Styling */
 .chip {
-  @apply inline-flex items-center justify-center gap-2 rounded-full border px-2 font-medium text-nowrap;
+  @apply inline-flex items-center justify-center gap-2 rounded-full border px-3 font-medium text-nowrap;
 }
 
 .chip--sm {
-  @apply h-4 text-sm;
+  @apply h-6 text-sm;
 }
 
 .chip--md {
-  @apply h-6;
+  @apply h-8;
 }
 
 .chip--lg {
-  @apply h-8;
+  @apply h-10 text-lg;
 }
 
 .chip--primary {

package/src/components/collapsible.css

@@ -34,3 +34,7 @@
     height: 0;
   }
 }
+
+.collapsible__content {
+  @apply ms-3 px-3 py-2;
+}

package/src/components/dialog.css

@@ -20,12 +20,12 @@
 
   &[data-starting-style],
   &[data-ending-style] {
-    @apply scale-95 opacity-0;
+    @apply scale-90 opacity-0;
   }
 }
 
 .dialog__content {
-  @apply bg-surface text-surface-foreground rounded border p-4 shadow;
+  @apply bg-surface text-surface-foreground relative rounded border p-4 shadow;
 }
 
 .dialog__title {
@@ -39,7 +39,7 @@
 .dialog__close {
   @apply cursor-pointer;
 
-  @apply absolute top-3 right-5;
+  @apply absolute top-0 right-0 m-3;
 
   svg {
     @apply text-muted-foreground size-5;

package/src/components/index.css

@@ -1,44 +0,0 @@
-@import "./meter.css";
-@import "./alert.css";
-@import "./label.css";
-@import "./toggle-button.css";
-@import "./field.css";
-@import "./list.css";
-@import "./radio.css";
-@import "./accordion.css";
-@import "./link.css";
-@import "./checkbox.css";
-@import "./scroll-area.css";
-@import "./spinner.css";
-@import "./tabs.css";
-@import "./drawer.css";
-@import "./fieldset.css";
-@import "./sidebar.css";
-@import "./number-field.css";
-@import "./button-group.css";
-@import "./checkbox-group.css";
-@import "./chip.css";
-@import "./navbar.css";
-@import "./slider.css";
-@import "./avatar.css";
-@import "./select.css";
-@import "./text.css";
-@import "./switch.css";
-@import "./popover.css";
-@import "./collapsible.css";
-@import "./context-menu.css";
-@import "./input.css";
-@import "./preview-card.css";
-@import "./table.css";
-@import "./navigation-menu.css";
-@import "./alert-dialog.css";
-@import "./progress.css";
-@import "./card.css";
-@import "./tooltip.css";
-@import "./combobox.css";
-@import "./form.css";
-@import "./autocomplete.css";
-@import "./dialog.css";
-@import "./menu.css";
-@import "./button.css";
-@import "./separator.css";

package/src/components/menu.css

@@ -3,9 +3,11 @@
 }
 
 .menu__popup {
-  @apply rounded p-3;
+  @apply rounded p-1;
 
-  @apply bg-overlay text-overlay-foreground shadow;
+  @apply w-56;
+
+  @apply bg-overlay text-overlay-foreground border shadow;
 
   @apply transition-[transform,scale] motion-reduce:transition-none;
 
@@ -16,33 +18,42 @@
 }
 
 .menu__arrow {
-  @apply text-overlay flex size-6;
+  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+
+  @apply bg-overlay size-2 border;
 
   &[data-side="top"] {
-    @apply -bottom-3 rotate-180;
+    @apply -bottom-2 rotate-180;
   }
 
   &[data-side="right"] {
-    @apply -start-3 rotate-90;
+    @apply -start-2 rotate-90;
   }
 
   &[data-side="bottom"] {
-    @apply -top-3;
+    @apply -top-2;
   }
 
   &[data-side="left"] {
-    @apply -end-3 -rotate-90;
+    @apply -end-2 -rotate-90;
   }
 }
 
-.menu__item {
-  @apply relative flex cursor-pointer items-center rounded px-3 py-2 text-sm leading-none select-none;
+.menu__item,
+.menu__submenu__trigger {
+  @apply cursor-pointer;
 
-  &:focus {
-    @apply bg-secondary text-secondary-foreground outline-none;
-  }
+  @apply bg-overlay hover-safe:bg-secondary hover-safe:text-secondary-foreground rounded shadow;
+
+  @apply flex items-center gap-2 px-2 py-1;
+
+  @apply transition-colors motion-reduce:transition-none;
+}
+
+.menu__group {
+  @apply mt-2 mb-1 px-1;
 }
 
-.autocomplete__separator {
-  @apply bg-border my-2 h-px;
+.menu__group-label {
+  @apply text-muted-foreground;
 }

package/src/components/navbar.css

@@ -1,36 +1,52 @@
-/** Base Styling */
 .navbar {
-  @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;
+  @apply bg-surface text-surface-foreground relative shadow;
 }
 
 .navbar__container {
-  @apply mx-auto flex w-full max-w-7xl items-center justify-between;
+  @apply mx-auto max-w-7xl px-4;
+
+  @apply flex h-(--navbar-height) items-center justify-between;
 }
 
 .navbar__content {
-  @apply flex items-center gap-2;
+  @apply flex items-center gap-4;
 }
 
-.navbar__toggle {
-  @apply md:hidden;
+.navbar__menu {
+  @apply absolute top-full right-0 left-0;
+  @apply h-96 w-full overflow-hidden;
 
-  svg {
-    @apply me-2 size-5;
-  }
-}
+  @apply flex flex-col md:hidden;
 
-.navbar__list {
-  @apply flex items-center gap-4;
-}
+  @apply bg-overlay/10 text-overlay-foreground shadow backdrop-blur-2xl;
 
-.navbar__list-item {
-  @apply list-none;
+  @apply transition-[height] motion-reduce:transition-none;
 }
 
-.navbar__menu {
-  @apply flex flex-col gap-1;
+[data-open="true"] .navbar__menu {
+  @apply h-0;
 }
 
 .navbar__menu-item {
-  @apply w-full list-none px-4 py-2;
+  @apply cursor-pointer;
+  @apply px-3 py-2;
+
+  @apply text-foreground hover-safe:bg-primary/10 hover-safe:text-primary;
+
+  @apply transition-[background-color,color] motion-reduce:transition-none;
+}
+
+.navbar__toggle {
+  @apply md:hidden;
+  @apply cursor-pointer;
+
+  svg {
+    @apply text-muted-foreground size-5;
+
+    @apply transition-colors motion-reduce:transition-none;
+
+    &:hover {
+      @apply text-foreground;
+    }
+  }
 }

package/src/components/popover.css

@@ -7,7 +7,7 @@
 .popover__popup {
   @apply relative rounded px-3 py-2;
 
-  @apply bg-overlay text-overlay-foreground shadow;
+  @apply bg-overlay text-overlay-foreground border shadow;
 
   @apply transition-[transform,scale] motion-reduce:transition-none;
 

package/src/components/tooltip.css

@@ -7,11 +7,11 @@
 }
 
 .tooltip__popup {
-  @apply rounded px-2 py-1 text-xs leading-none font-medium;
+  @apply px-3 py-2 text-sm leading-none font-medium;
 
-  @apply bg-overlay-foreground text-overlay;
+  @apply bg-surface text-surface-foreground rounded border shadow;
 
-  @apply transition-[transform,scale,opacity] motion-reduce:transition-none;
+  @apply transition-[scale,opacity] motion-reduce:transition-none;
 
   &[data-starting-style],
   &[data-ending-style] {
@@ -21,7 +21,7 @@
 
 .tooltip__arrow {
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-  @apply bg-overlay-foreground absolute z-50 size-2;
+  @apply bg-surface absolute z-50 size-2;
 
   &[data-side="top"] {
     @apply -bottom-1 rotate-180;
@@ -39,3 +39,11 @@
     @apply -end-1.5 -rotate-90;
   }
 }
+
+.tooltip__title {
+  @apply font-medium;
+}
+
+.tooltip__description {
+  @apply text-muted-foreground text-sm;
+}