@askrjs/themes 0.0.9 → 0.0.10

package/src/themes/default/styles/overlays/dropdown.css

@@ -1,7 +1,7 @@
 :where(.dropdown-trigger, [data-slot="dropdown-trigger"]) {
   --_button-height: var(--ak-density-control-height-md);
   --_button-padding-x: var(--ak-density-control-padding-x-md);
-  --_button-border: color-mix(in srgb, var(--ak-color-border) 84%, var(--ak-color-surface) 16%);
+  --_button-border: var(--ak-color-input);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -10,13 +10,13 @@
   padding-block: 0;
   padding-inline: var(--_button-padding-x);
   border: 1px solid var(--_button-border);
-  border-radius: var(--ak-radius-md);
+  border-radius: var(--ak-radius-lg);
   background: var(--ak-color-surface);
   color: var(--ak-color-text);
-  box-shadow: var(--ak-shadow-sm);
+  box-shadow: none;
   cursor: pointer;
   font-size: var(--ak-font-size-sm);
-  font-weight: var(--ak-font-weight-semibold);
+  font-weight: var(--ak-font-weight-medium);
   line-height: 1;
   transition:
     background-color var(--ak-duration-fast) var(--ak-ease-standard),
@@ -26,27 +26,48 @@
 }
 
 :where(.dropdown-trigger:hover, [data-slot="dropdown-trigger"]:hover) {
-  background: var(--ak-color-surface-muted);
-  border-color: var(--ak-color-border-strong);
+  background: var(--ak-color-accent);
+  border-color: var(--ak-color-input);
 }
 
 :where(.dropdown-trigger:focus-visible, [data-slot="dropdown-trigger"]:focus-visible) {
   outline: none;
-  box-shadow:
-    0 0 0 1px var(--ak-color-surface),
-    0 0 0 calc(var(--ak-focus-ring-width) + 1px) var(--ak-color-focus-ring);
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
 :where(.dropdown-trigger[data-state="open"], [data-slot="dropdown-trigger"][data-state="open"]) {
-  border-color: var(--ak-color-primary);
-  background: color-mix(in srgb, var(--ak-color-primary-soft) 12%, var(--ak-color-surface));
+  border-color: var(--ak-color-ring);
+  background: var(--ak-color-accent);
+}
+
+:where([data-slot="dropdown-trigger"][data-variant="ghost"]) {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+  color: var(--ak-color-text);
+}
+
+:where([data-slot="dropdown-trigger"][data-variant="ghost"]:hover) {
+  background: var(--ak-color-accent);
+  border-color: transparent;
+  color: var(--ak-color-accent-ink);
+}
+
+:where([data-slot="dropdown-trigger"][data-variant="ghost"][data-state="open"]) {
+  border-color: transparent;
+  background: var(--ak-color-accent);
+  color: var(--ak-color-accent-ink);
+}
+
+:where([data-slot="dropdown-trigger"][data-size="icon"]) {
+  inline-size: var(--_button-height);
+  min-inline-size: var(--_button-height);
+  padding-inline: 0;
 }
 
 :where(.dropdown-trigger[data-disabled], [data-slot="dropdown-trigger"][data-disabled]) {
-  background: var(--ak-color-disabled-surface);
-  border-color: var(--ak-color-disabled-border);
   box-shadow: none;
-  color: var(--ak-color-disabled-text);
+  opacity: 0.5;
   pointer-events: none;
   cursor: not-allowed;
 }
@@ -74,23 +95,19 @@
 }
 
 :where(.dropdown-content, [data-slot="dropdown-content"]) {
-  --_dropdown-surface: var(--ak-color-surface-overlay);
-  --_dropdown-border: color-mix(
-    in srgb,
-    var(--ak-color-border-subtle) 88%,
-    var(--_dropdown-surface) 12%
-  );
+  --_dropdown-surface: var(--ak-color-popover);
+  --_dropdown-border: var(--ak-color-border);
 
   display: grid;
   gap: 0.25rem;
   box-sizing: border-box;
-  min-inline-size: min(12rem, 100%);
-  max-inline-size: min(100%, calc(100vw - 1rem));
+  min-inline-size: min(12rem, calc(100vw - 1rem));
+  max-inline-size: calc(100vw - 1rem);
   max-block-size: min(20rem, calc(100vh - 4rem));
   overflow-y: auto;
-  padding: var(--ak-space-sm);
+  padding: var(--ak-space-xs);
   border: 1px solid var(--_dropdown-border);
-  border-radius: var(--ak-radius-lg);
+  border-radius: var(--ak-radius-md);
   background: var(--_dropdown-surface);
   color: var(--ak-color-text);
   box-shadow: var(--ak-shadow-md);
@@ -107,37 +124,74 @@
 :where(.dropdown-item, [data-slot="dropdown-item"]) {
   display: flex;
   align-items: center;
-  min-height: var(--ak-density-control-height-md);
-  padding: 0 var(--ak-density-control-padding-x-md);
+  gap: var(--ak-space-sm);
+  justify-content: flex-start;
+  inline-size: 100%;
+  min-height: 2rem;
+  padding: 0 var(--ak-space-sm);
   border: 0;
   border-radius: var(--ak-radius-md);
   background: transparent;
   color: var(--ak-color-text);
   font-size: var(--ak-font-size-sm);
-  font-weight: var(--ak-font-weight-medium);
+  font-weight: var(--ak-font-weight-regular);
+  line-height: var(--ak-line-height-tight);
   overflow-wrap: anywhere;
+  text-align: start;
+  text-decoration: none;
   cursor: pointer;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
     color var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
+:where(.dropdown-item, [data-slot="dropdown-item"]) > :where([data-slot="icon"], svg) {
+  flex: none;
+  inline-size: var(--ak-icon-size-sm);
+  block-size: var(--ak-icon-size-sm);
+  color: var(--ak-color-text-muted);
+}
+
 :where(.dropdown-item, [data-slot="dropdown-item"]):hover {
-  background: var(--ak-color-surface-muted);
+  background: var(--ak-color-hover);
+  color: var(--ak-color-text);
+}
+
+:where(.dropdown-item, [data-slot="dropdown-item"]):hover > :where([data-slot="icon"], svg),
+:where(.dropdown-item, [data-slot="dropdown-item"]):focus-visible
+  > :where([data-slot="icon"], svg) {
+  color: currentColor;
 }
 
 :where(.dropdown-item, [data-slot="dropdown-item"]):focus-visible {
   outline: none;
-  background: var(--ak-color-surface-muted);
-  box-shadow: inset 0 0 0 1px var(--ak-color-focus-ring);
+  background: var(--ak-color-hover);
+  color: var(--ak-color-text);
+  box-shadow: none;
 }
 
 :where(.dropdown-item, [data-slot="dropdown-item"])[data-disabled] {
-  color: var(--ak-color-disabled-text);
+  color: var(--ak-color-text-muted);
+  opacity: 0.5;
   pointer-events: none;
   cursor: not-allowed;
 }
 
+:where(.dropdown-item, [data-slot="dropdown-item"])[data-variant="destructive"] {
+  color: var(--ak-color-danger);
+}
+
+:where(.dropdown-item, [data-slot="dropdown-item"])[data-variant="destructive"]
+  > :where([data-slot="icon"], svg) {
+  color: currentColor;
+}
+
+:where(.dropdown-item, [data-slot="dropdown-item"])[data-variant="destructive"]:hover,
+:where(.dropdown-item, [data-slot="dropdown-item"])[data-variant="destructive"]:focus-visible {
+  background: color-mix(in oklch, var(--ak-color-danger) 9%, transparent);
+  color: var(--ak-color-danger);
+}
+
 :where(.dropdown-label, [data-slot="dropdown-label"]) {
   padding: 0 var(--ak-density-control-padding-x-md);
   color: var(--ak-color-text-muted);
@@ -147,6 +201,29 @@
   text-transform: uppercase;
 }
 
+:where([data-slot="dropdown-label"][data-variant="account"]) {
+  display: flex;
+  align-items: center;
+  gap: var(--ak-space-sm);
+  min-inline-size: 12.5rem;
+  padding: 0.125rem var(--ak-space-sm) var(--ak-space-xs);
+  color: var(--ak-color-text);
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-medium);
+  letter-spacing: 0;
+  line-height: var(--ak-line-height-tight);
+  text-transform: none;
+}
+
+:where([data-slot="dropdown-label"][data-variant="account"] [data-slot="avatar"]) {
+  inline-size: 2rem;
+  block-size: 2rem;
+}
+
+:where([data-slot="dropdown-label"][data-variant="account"]) :where([data-slot="text"]) {
+  text-transform: none;
+}
+
 :where(.dropdown-separator, [data-slot="dropdown-separator"]) {
   block-size: 1px;
   margin: 0.25rem 0;

package/src/themes/default/styles/overlays/hover-card.css

@@ -1,56 +1,78 @@
 @keyframes ak-hover-card-in {
   from {
     opacity: 0;
-    transform: translateY(4px) scale(0.98);
+    transform: translateY(4px);
   }
 
   to {
     opacity: 1;
-    transform: translateY(0) scale(1);
+    transform: translateY(0);
   }
 }
 
 @keyframes ak-hover-card-out {
   from {
     opacity: 1;
-    transform: translateY(0) scale(1);
+    transform: translateY(0);
   }
 
   to {
     opacity: 0;
-    transform: translateY(4px) scale(0.98);
+    transform: translateY(4px);
   }
 }
 
 :where([data-slot="hover-card-trigger"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ak-space-xs);
+  max-inline-size: 100%;
+  border: 0;
+  border-radius: var(--ak-radius-md);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  text-decoration: none;
   cursor: pointer;
 }
 
+:where([data-slot="hover-card-trigger"][data-variant="plain"]) {
+  padding: 0;
+}
+
+:where([data-slot="hover-card-trigger"]:not([data-variant="plain"])) {
+  min-height: var(--ak-density-control-height-sm);
+  padding-inline: var(--ak-space-xs);
+}
+
+:where([data-slot="hover-card-trigger"]:hover) {
+  color: var(--ak-color-text);
+}
+
 :where([data-slot="hover-card-trigger"]:focus-visible) {
   outline: none;
-  box-shadow:
-    0 0 0 1px var(--ak-color-surface),
-    0 0 0 calc(var(--ak-focus-ring-width) + 1px) var(--ak-color-focus-ring);
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
 :where([data-slot="hover-card-trigger"][data-disabled]) {
+  opacity: 0.5;
+  pointer-events: none;
   cursor: not-allowed;
 }
 
 :where([data-slot="hover-card-content"]) {
-  --_hover-card-surface: var(--ak-color-surface-overlay);
-  --_hover-card-border: color-mix(
-    in srgb,
-    var(--ak-color-border-subtle) 88%,
-    var(--_hover-card-surface) 12%
-  );
+  --_hover-card-surface: var(--ak-color-popover);
+  --_hover-card-border: var(--ak-color-border);
 
   box-sizing: border-box;
-  min-inline-size: min(14rem, 100%);
-  max-inline-size: min(100%, calc(100vw - 1rem));
-  padding: calc(var(--ak-space-md) + 0.125rem);
+  display: grid;
+  gap: var(--ak-space-sm);
+  inline-size: min(18rem, calc(100vw - 1rem));
+  max-inline-size: calc(100vw - 1rem);
+  padding: var(--ak-space-md);
   border: 1px solid var(--_hover-card-border);
-  border-radius: var(--ak-radius-lg);
+  border-radius: var(--ak-radius-md);
   background: var(--_hover-card-surface);
   color: var(--ak-color-text);
   box-shadow: var(--ak-shadow-md);

package/src/themes/default/styles/overlays/menubar.css

@@ -0,0 +1,223 @@
+@keyframes ak-menubar-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ak-menubar-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+:where([data-slot="menubar"]) {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.125rem;
+  max-inline-size: 100%;
+  padding: 0.1875rem;
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-lg);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  box-shadow: none;
+}
+
+:where([data-slot="menubar-trigger"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ak-space-xs);
+  min-height: var(--ak-density-control-height-sm);
+  padding-block: 0;
+  padding-inline: var(--ak-density-control-padding-x-sm);
+  border: 1px solid transparent;
+  border-radius: var(--ak-radius-md);
+  background: transparent;
+  color: var(--ak-color-text);
+  box-shadow: none;
+  font: inherit;
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-medium);
+  line-height: 1;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background var(--ak-duration-fast) var(--ak-ease-standard),
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="menubar-trigger"] > :where([data-slot="icon"], svg)) {
+  flex: none;
+  inline-size: var(--ak-icon-size-sm);
+  block-size: var(--ak-icon-size-sm);
+  color: currentColor;
+}
+
+:where([data-slot="menubar-trigger"]:hover, [data-slot="menubar-trigger"][data-state="open"]) {
+  background: var(--ak-color-hover);
+  color: var(--ak-color-text);
+}
+
+:where([data-slot="menubar-trigger"]:focus-visible) {
+  outline: none;
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
+}
+
+:where([data-slot="menubar-trigger"][data-disabled]) {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+:where([data-slot="menubar-content"]) {
+  display: grid;
+  position: fixed;
+  inset: auto;
+  gap: 0.25rem;
+  box-sizing: border-box;
+  min-inline-size: min(12rem, calc(100vw - 1rem));
+  max-inline-size: calc(100vw - 1rem);
+  max-block-size: min(20rem, calc(100vh - 4rem));
+  overflow-y: auto;
+  padding: var(--ak-space-xs);
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-popover);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-md);
+  z-index: var(--ak-z-dropdown);
+  transform-origin: top center;
+  animation: ak-menubar-in var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="menubar-content"][data-state="closed"]) {
+  animation: ak-menubar-out var(--ak-duration-fast) var(--ak-ease-standard);
+  pointer-events: none;
+}
+
+:where([data-slot="menubar-group"]) {
+  display: grid;
+  gap: 0.25rem;
+}
+
+:where([data-slot="menubar-item"], [data-slot="menubar-sub-trigger"]) {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--ak-space-sm);
+  inline-size: 100%;
+  min-height: 2rem;
+  padding: 0 var(--ak-space-sm);
+  border: 0;
+  border-radius: var(--ak-radius-md);
+  background: transparent;
+  color: var(--ak-color-text);
+  font: inherit;
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-regular);
+  line-height: var(--ak-line-height-tight);
+  overflow-wrap: anywhere;
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where(
+  [data-slot="menubar-item"] > :where([data-slot="icon"], svg),
+  [data-slot="menubar-sub-trigger"] > :where([data-slot="icon"], svg)
+) {
+  flex: none;
+  inline-size: var(--ak-icon-size-sm);
+  block-size: var(--ak-icon-size-sm);
+  color: var(--ak-color-text-muted);
+}
+
+:where(
+  [data-slot="menubar-item"]:hover,
+  [data-slot="menubar-sub-trigger"]:hover,
+  [data-slot="menubar-sub-trigger"][data-state="open"]
+) {
+  background: var(--ak-color-hover);
+  color: var(--ak-color-text);
+}
+
+:where(
+  [data-slot="menubar-item"]:hover > :where([data-slot="icon"], svg),
+  [data-slot="menubar-item"]:focus-visible > :where([data-slot="icon"], svg),
+  [data-slot="menubar-sub-trigger"]:hover > :where([data-slot="icon"], svg),
+  [data-slot="menubar-sub-trigger"]:focus-visible > :where([data-slot="icon"], svg)
+) {
+  color: currentColor;
+}
+
+:where([data-slot="menubar-item"]:focus-visible, [data-slot="menubar-sub-trigger"]:focus-visible) {
+  outline: none;
+  background: var(--ak-color-hover);
+  color: var(--ak-color-text);
+  box-shadow: none;
+}
+
+:where(
+  [data-slot="menubar-item"][data-disabled],
+  [data-slot="menubar-sub-trigger"][data-disabled]
+) {
+  color: var(--ak-color-text-muted);
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+:where([data-slot="menubar-sub-trigger"])::after {
+  content: "";
+  display: block;
+  inline-size: 0.45rem;
+  block-size: 0.45rem;
+  margin-inline-start: auto;
+  border-block-start: 1px solid currentColor;
+  border-inline-end: 1px solid currentColor;
+  opacity: 0.72;
+  transform: rotate(45deg);
+}
+
+:where([data-slot="menubar-label"]) {
+  padding: 0 var(--ak-density-control-padding-x-sm);
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-xs);
+  font-weight: var(--ak-font-weight-semibold);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+:where([data-slot="menubar-separator"]) {
+  block-size: 1px;
+  margin: 0.25rem 0;
+  background: var(--ak-color-border);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-slot="menubar-content"]) {
+    animation: none;
+  }
+}

package/src/themes/default/styles/overlays/popover.css

@@ -23,12 +23,8 @@
 }
 
 :where([data-slot="popover-content"]) {
-  --_popover-surface: var(--ak-color-surface-overlay);
-  --_popover-border: color-mix(
-    in srgb,
-    var(--ak-color-border-subtle) 88%,
-    var(--_popover-surface) 12%
-  );
+  --_popover-surface: var(--ak-color-popover);
+  --_popover-border: var(--ak-color-border);
 
   box-sizing: border-box;
   min-inline-size: min(14rem, 100%);
@@ -37,7 +33,7 @@
   gap: var(--ak-space-sm);
   padding: calc(var(--ak-space-md) + 0.125rem);
   border: 1px solid var(--_popover-border);
-  border-radius: var(--ak-radius-lg);
+  border-radius: var(--ak-radius-md);
   background: var(--_popover-surface);
   color: var(--ak-color-text);
   box-shadow: var(--ak-shadow-md);
@@ -46,25 +42,79 @@
   animation: ak-slide-up var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
+:where([data-slot="popover-content"][data-width="sm"]) {
+  inline-size: min(18rem, calc(100vw - 1rem));
+}
+
+:where([data-slot="popover-content"][data-width="md"]) {
+  inline-size: min(22rem, calc(100vw - 1rem));
+}
+
+:where([data-slot="popover-content"][data-width="lg"]) {
+  inline-size: min(28rem, calc(100vw - 1rem));
+}
+
 :where([data-slot="popover-content"][data-state="closed"]) {
   animation: ak-slide-up-out var(--ak-duration-fast) var(--ak-ease-standard);
   pointer-events: none;
 }
 
 :where([data-slot="popover-trigger"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ak-space-xs);
+  min-height: var(--ak-density-control-height-sm);
+  padding-inline: var(--ak-density-control-padding-x-sm);
+  border: 1px solid transparent;
+  border-radius: var(--ak-radius-md);
+  background: transparent;
+  color: var(--ak-color-text-muted);
+  font: inherit;
+  line-height: 1;
+  text-decoration: none;
   cursor: pointer;
+  transition:
+    background var(--ak-duration-fast) var(--ak-ease-standard),
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="popover-trigger"][data-variant="ghost"]:hover) {
+  background: var(--ak-color-accent);
+  color: var(--ak-color-accent-ink);
+}
+
+:where([data-slot="popover-trigger"][data-size="icon"]) {
+  inline-size: var(--ak-density-control-height-md);
+  min-inline-size: var(--ak-density-control-height-md);
+  min-height: var(--ak-density-control-height-md);
+  padding-inline: 0;
+}
+
+:where([data-slot="popover-trigger"][data-size="icon-sm"]) {
+  inline-size: var(--ak-density-control-height-sm);
+  min-inline-size: var(--ak-density-control-height-sm);
+  min-height: var(--ak-density-control-height-sm);
+  padding-inline: 0;
+}
+
+:where([data-slot="popover-trigger"][data-size="icon-xs"]) {
+  inline-size: var(--ak-density-control-height-xs);
+  min-inline-size: var(--ak-density-control-height-xs);
+  min-height: var(--ak-density-control-height-xs);
+  padding-inline: 0;
 }
 
 :where([data-slot="popover-trigger"]:focus-visible) {
   outline: none;
-  box-shadow:
-    0 0 0 1px var(--ak-color-surface),
-    0 0 0 calc(var(--ak-focus-ring-width) + 1px) var(--ak-color-focus-ring);
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
 :where([data-slot="popover-trigger"][data-state="open"]) {
-  border-color: var(--ak-color-primary);
-  background: color-mix(in srgb, var(--ak-color-primary-soft) 12%, var(--ak-color-surface));
+  border-color: var(--ak-color-ring);
+  background: var(--ak-color-accent);
+  color: var(--ak-color-accent-ink);
 }
 
 :where([data-slot="popover-close"]) {
@@ -73,11 +123,11 @@
   justify-content: center;
   min-height: var(--ak-density-control-height-md);
   padding: 0 var(--ak-density-control-padding-x-md);
-  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, var(--ak-color-surface) 16%);
+  border: 1px solid var(--ak-color-input);
   border-radius: var(--ak-radius-md);
   background: var(--ak-color-surface);
   color: var(--ak-color-text);
-  box-shadow: var(--ak-shadow-sm);
+  box-shadow: var(--ak-shadow-xs);
   font-size: var(--ak-font-size-sm);
   font-weight: var(--ak-font-weight-semibold);
   line-height: 1;
@@ -89,22 +139,18 @@
 }
 
 :where([data-slot="popover-close"]:hover) {
-  background: var(--ak-color-surface-muted);
-  border-color: var(--ak-color-border-strong);
-  box-shadow: var(--ak-shadow-sm);
+  background: var(--ak-color-accent);
+  border-color: var(--ak-color-input);
+  box-shadow: var(--ak-shadow-xs);
 }
 
 :where([data-slot="popover-close"]:focus-visible) {
   outline: none;
-  box-shadow:
-    0 0 0 1px var(--_popover-surface),
-    0 0 0 calc(var(--ak-focus-ring-width) + 1px) var(--ak-color-focus-ring);
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
 :where([data-slot="popover-close"][data-disabled]) {
-  background: var(--ak-color-disabled-surface);
-  border-color: var(--ak-color-disabled-border);
-  color: var(--ak-color-disabled-text);
+  opacity: 0.5;
   pointer-events: none;
   cursor: not-allowed;
 }