@askrjs/themes 0.0.2 → 0.0.4

package/templates/theme/styles/overlays/dialog.css

@@ -41,32 +41,46 @@
 :where([data-slot="dialog-overlay"]) {
   position: fixed;
   inset: 0;
-  background: color-mix(in srgb, var(--ak-color-backdrop) 96%, black 4%);
+  background: var(--ak-color-backdrop);
+  z-index: var(--ak-z-modal-backdrop);
   animation: ak-fade-in var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
 :where([data-slot="dialog-overlay"][data-state="closed"]) {
   animation: ak-fade-out var(--ak-duration-fast) var(--ak-ease-standard);
+  pointer-events: none;
 }
 
 :where([data-slot="dialog-content"]) {
+  --_dialog-surface: var(--ak-color-surface-overlay);
+  --_dialog-border: color-mix(
+    in srgb,
+    var(--ak-color-border-subtle) 88%,
+    var(--_dialog-surface) 12%
+  );
+
   display: grid;
-  gap: var(--ak-space-sm);
-  min-width: min(34rem, calc(100vw - 1.5rem));
-  max-width: 40rem;
-  max-block-size: calc(100dvh - 4rem);
+  gap: var(--ak-space-md);
+  box-sizing: border-box;
+  inline-size: min(40rem, 100%);
+  min-inline-size: 0;
+  max-inline-size: calc(100vw - 1rem);
+  max-block-size: calc(100dvh - 1rem);
   overflow-y: auto;
   padding: calc(var(--ak-layout-panel-padding) + 0.25rem);
-  border: 1px solid color-mix(in srgb, var(--ak-color-border-subtle) 88%, white 12%);
+  border: 1px solid var(--_dialog-border);
   border-radius: var(--ak-radius-lg);
-  background: var(--ak-color-surface-raised);
+  background: var(--_dialog-surface);
   color: var(--ak-color-text);
   box-shadow: var(--ak-shadow-md);
+  z-index: var(--ak-z-modal);
+  transform-origin: center;
   animation: ak-scale-in var(--ak-duration-normal) var(--ak-ease-standard);
 }
 
 :where([data-slot="dialog-content"][data-state="closed"]) {
   animation: ak-scale-out var(--ak-duration-fast) var(--ak-ease-standard);
+  pointer-events: none;
 }
 
 :where([data-slot="dialog-title"]) {
@@ -75,6 +89,7 @@
   font-size: var(--ak-font-size-lg);
   font-weight: var(--ak-font-weight-bold);
   line-height: var(--ak-line-height-tight);
+  overflow-wrap: anywhere;
 }
 
 :where([data-slot="dialog-description"]) {
@@ -87,17 +102,21 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 2.5rem;
-  padding: 0 calc(var(--ak-space-md) + 0.125rem);
-  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, white 16%);
+  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-radius: var(--ak-radius-md);
   background: var(--ak-color-surface);
   color: var(--ak-color-text);
   box-shadow: var(--ak-shadow-sm);
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-semibold);
+  line-height: 1;
   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),
     box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
@@ -107,6 +126,13 @@
   box-shadow: var(--ak-shadow-sm);
 }
 
+:where([data-slot="dialog-close"]:focus-visible) {
+  outline: none;
+  box-shadow:
+    0 0 0 1px var(--_dialog-surface),
+    0 0 0 calc(var(--ak-focus-ring-width) + 1px) var(--ak-color-focus-ring);
+}
+
 :where([data-slot="dialog-close"][data-disabled]) {
   background: var(--ak-color-disabled-surface);
   border-color: var(--ak-color-disabled-border);
@@ -114,3 +140,9 @@
   pointer-events: none;
   cursor: not-allowed;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-slot="dialog-overlay"], [data-slot="dialog-content"]) {
+    animation: none;
+  }
+}

package/templates/theme/styles/overlays/dropdown.css

@@ -0,0 +1,160 @@
+: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%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ak-space-sm);
+  min-height: var(--_button-height);
+  padding-block: 0;
+  padding-inline: var(--_button-padding-x);
+  border: 1px solid var(--_button-border);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-sm);
+  cursor: pointer;
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-semibold);
+  line-height: 1;
+  transition:
+    background-color 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(.dropdown-trigger:hover, [data-slot="dropdown-trigger"]:hover) {
+  background: var(--ak-color-surface-muted);
+  border-color: var(--ak-color-border-strong);
+}
+
+: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);
+}
+
+: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));
+}
+
+: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);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+@keyframes ak-menu-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ak-menu-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+: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%
+  );
+
+  display: grid;
+  gap: 0.25rem;
+  box-sizing: border-box;
+  min-inline-size: min(12rem, 100%);
+  max-inline-size: min(100%, calc(100vw - 1rem));
+  max-block-size: min(20rem, calc(100vh - 4rem));
+  overflow-y: auto;
+  padding: var(--ak-space-sm);
+  border: 1px solid var(--_dropdown-border);
+  border-radius: var(--ak-radius-lg);
+  background: var(--_dropdown-surface);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-md);
+  z-index: var(--ak-z-dropdown);
+  transform-origin: top center;
+  animation: ak-menu-in var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where(.dropdown-content, [data-slot="dropdown-content"])[data-state="closed"] {
+  animation: ak-menu-out var(--ak-duration-fast) var(--ak-ease-standard);
+  pointer-events: none;
+}
+
+: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);
+  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);
+  overflow-wrap: anywhere;
+  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"]):hover {
+  background: var(--ak-color-surface-muted);
+}
+
+: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);
+}
+
+:where(.dropdown-item, [data-slot="dropdown-item"])[data-disabled] {
+  color: var(--ak-color-disabled-text);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+:where(.dropdown-label, [data-slot="dropdown-label"]) {
+  padding: 0 var(--ak-density-control-padding-x-md);
+  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(.dropdown-separator, [data-slot="dropdown-separator"]) {
+  block-size: 1px;
+  margin: 0.25rem 0;
+  background: var(--ak-color-border);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.dropdown-content, [data-slot="dropdown-content"]) {
+    animation: none;
+  }
+}

package/templates/theme/styles/overlays/hover-card.css

@@ -26,21 +26,46 @@
   cursor: pointer;
 }
 
+: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);
+}
+
 :where([data-slot="hover-card-trigger"][data-disabled]) {
   cursor: not-allowed;
 }
 
 :where([data-slot="hover-card-content"]) {
-  min-width: 14rem;
+  --_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%
+  );
+
+  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);
-  border: 1px solid color-mix(in srgb, var(--ak-color-border-subtle) 84%, white 16%);
+  border: 1px solid var(--_hover-card-border);
   border-radius: var(--ak-radius-lg);
-  background: var(--ak-color-surface-raised);
+  background: var(--_hover-card-surface);
   color: var(--ak-color-text);
   box-shadow: var(--ak-shadow-md);
+  z-index: var(--ak-z-popover);
+  transform-origin: top center;
   animation: ak-hover-card-in var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
 :where([data-slot="hover-card-content"][data-state="closed"]) {
   animation: ak-hover-card-out var(--ak-duration-fast) var(--ak-ease-standard);
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-slot="hover-card-content"]) {
+    animation: none;
+  }
 }

package/templates/theme/styles/overlays/popover.css

@@ -3,6 +3,7 @@
     opacity: 0;
     transform: translateY(4px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -14,6 +15,7 @@
     opacity: 1;
     transform: translateY(0);
   }
+
   to {
     opacity: 0;
     transform: translateY(4px);
@@ -21,35 +23,64 @@
 }
 
 :where([data-slot="popover-content"]) {
-  min-width: 14rem;
+  --_popover-surface: var(--ak-color-surface-overlay);
+  --_popover-border: color-mix(
+    in srgb,
+    var(--ak-color-border-subtle) 88%,
+    var(--_popover-surface) 12%
+  );
+
+  box-sizing: border-box;
+  min-inline-size: min(14rem, 100%);
+  max-inline-size: min(100%, calc(100vw - 1rem));
+  display: grid;
+  gap: var(--ak-space-sm);
   padding: calc(var(--ak-space-md) + 0.125rem);
-  border: 1px solid color-mix(in srgb, var(--ak-color-border-subtle) 84%, white 16%);
+  border: 1px solid var(--_popover-border);
   border-radius: var(--ak-radius-lg);
-  background: var(--ak-color-surface-raised);
+  background: var(--_popover-surface);
   color: var(--ak-color-text);
   box-shadow: var(--ak-shadow-md);
+  z-index: var(--ak-z-popover);
+  transform-origin: top center;
   animation: ak-slide-up var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
 :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"]) {
+  cursor: pointer;
+}
+
+: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);
 }
 
 :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));
 }
 
 :where([data-slot="popover-close"]) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 2.5rem;
-  padding: 0 calc(var(--ak-space-md) + 0.125rem);
-  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, white 16%);
+  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-radius: var(--ak-radius-md);
   background: var(--ak-color-surface);
   color: var(--ak-color-text);
   box-shadow: var(--ak-shadow-sm);
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-semibold);
+  line-height: 1;
   cursor: pointer;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
@@ -63,6 +94,13 @@
   box-shadow: var(--ak-shadow-sm);
 }
 
+: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);
+}
+
 :where([data-slot="popover-close"][data-disabled]) {
   background: var(--ak-color-disabled-surface);
   border-color: var(--ak-color-disabled-border);
@@ -70,3 +108,9 @@
   pointer-events: none;
   cursor: not-allowed;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-slot="popover-content"]) {
+    animation: none;
+  }
+}

package/templates/theme/styles/overlays/toast.css

@@ -4,8 +4,8 @@
 
 :where([data-slot="toast-viewport"]) {
   position: fixed;
-  inset-block-end: 1rem;
-  inset-inline-end: 1rem;
+  inset-block-end: max(1rem, env(safe-area-inset-bottom));
+  inset-inline-end: max(1rem, env(safe-area-inset-right));
   display: grid;
   gap: var(--ak-space-md);
   width: min(27rem, calc(100vw - 2rem));
@@ -35,42 +35,62 @@
 }
 
 :where([data-slot="toast"]) {
+  --_toast-surface: var(--ak-color-surface-overlay);
+  --_toast-border: color-mix(in srgb, var(--ak-color-border-subtle) 88%, var(--_toast-surface) 12%);
+
   display: grid;
   gap: var(--ak-space-sm);
+  box-sizing: border-box;
+  min-inline-size: 0;
   padding: calc(var(--ak-layout-panel-padding) - 0.15rem) var(--ak-layout-panel-padding);
-  border: 1px solid var(--ak-color-border-subtle);
+  border: 1px solid var(--_toast-border);
   border-radius: var(--ak-radius-lg);
-  background: var(--ak-color-surface-raised);
+  background: var(--_toast-surface);
   color: var(--ak-color-text);
   box-shadow: var(--ak-shadow-md);
+  transform-origin: bottom right;
   animation: ak-toast-in var(--ak-duration-normal) var(--ak-ease-standard);
 }
 
 :where([data-slot="toast"][data-state="closed"]) {
   animation: ak-toast-out var(--ak-duration-fast) var(--ak-ease-standard);
+  pointer-events: none;
 }
 
 :where([data-slot="toast-title"]) {
   font-weight: var(--ak-font-weight-bold);
   line-height: var(--ak-line-height-tight);
+  letter-spacing: -0.005em;
+  overflow-wrap: anywhere;
 }
 
 :where([data-slot="toast-description"]) {
   color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-sm);
   line-height: var(--ak-line-height-normal);
+  overflow-wrap: anywhere;
 }
 
 :where([data-slot="toast-action"]),
 :where([data-slot="toast-close"]) {
+  --_button-height: var(--ak-density-control-height-sm);
+  --_button-padding-x: var(--ak-density-control-padding-x-sm);
+  --_button-border: color-mix(in srgb, var(--ak-color-border) 84%, var(--_toast-surface) 16%);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 2.5rem;
-  padding: 0 var(--ak-space-md);
-  border: 1px solid var(--ak-color-border);
+  gap: var(--ak-space-sm);
+  min-height: var(--_button-height);
+  padding-block: 0;
+  padding-inline: var(--_button-padding-x);
+  border: 1px solid var(--_button-border);
   border-radius: var(--ak-radius-md);
-  background: color-mix(in srgb, var(--ak-color-primary-soft) 12%, var(--ak-color-surface));
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 12%, var(--_toast-surface));
   color: var(--ak-color-text);
+  box-shadow: none;
+  font-size: var(--ak-font-size-xs);
+  font-weight: var(--ak-font-weight-semibold);
+  line-height: 1;
   cursor: pointer;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
@@ -85,6 +105,29 @@
   box-shadow: var(--ak-shadow-sm);
 }
 
+:where([data-slot="toast-action"]:focus-visible),
+:where([data-slot="toast-close"]:focus-visible) {
+  outline: none;
+  box-shadow:
+    0 0 0 1px var(--_toast-surface),
+    0 0 0 calc(var(--ak-focus-ring-width) + 1px) var(--ak-color-focus-ring);
+}
+
+:where([data-slot="toast-close"]) {
+  gap: 0;
+  inline-size: var(--_button-height);
+  padding-inline: 0;
+  border-color: transparent;
+  border-radius: var(--ak-radius-round);
+  background: transparent;
+}
+
+:where([data-slot="toast-close"]:hover) {
+  background: var(--ak-color-hover);
+  border-color: transparent;
+  box-shadow: none;
+}
+
 :where([data-slot="toast-action"][data-disabled]),
 :where([data-slot="toast-close"][data-disabled]) {
   background: var(--ak-color-disabled-surface);
@@ -96,28 +139,34 @@
 
 /* toast variants */
 :where([data-slot="toast"][data-variant="success"]) {
-  background: color-mix(in srgb, var(--ak-color-success-soft) 78%, var(--ak-color-surface-raised));
-  border-color: var(--ak-color-success);
+  background: color-mix(in srgb, var(--ak-color-success-soft) 76%, var(--_toast-surface));
+  border-color: color-mix(in srgb, var(--ak-color-success) 62%, var(--_toast-border));
 }
 
 :where([data-slot="toast"][data-variant="warning"]) {
-  background: color-mix(in srgb, var(--ak-color-warning-soft) 78%, var(--ak-color-surface-raised));
-  border-color: var(--ak-color-warning);
+  background: color-mix(in srgb, var(--ak-color-warning-soft) 76%, var(--_toast-surface));
+  border-color: color-mix(in srgb, var(--ak-color-warning) 62%, var(--_toast-border));
 }
 
 :where([data-slot="toast"][data-variant="danger"]) {
-  background: color-mix(in srgb, var(--ak-color-danger-soft) 78%, var(--ak-color-surface-raised));
-  border-color: var(--ak-color-danger);
+  background: color-mix(in srgb, var(--ak-color-danger-soft) 76%, var(--_toast-surface));
+  border-color: color-mix(in srgb, var(--ak-color-danger) 62%, var(--_toast-border));
 }
 
 :where([data-slot="toast"][data-variant="info"]) {
-  background: color-mix(in srgb, var(--ak-color-info-soft) 78%, var(--ak-color-surface-raised));
-  border-color: var(--ak-color-info);
+  background: color-mix(in srgb, var(--ak-color-info-soft) 76%, var(--_toast-surface));
+  border-color: color-mix(in srgb, var(--ak-color-info) 62%, var(--_toast-border));
 }
 
 @media (max-width: 40rem) {
   :where([data-slot="toast-viewport"]) {
-    inset-inline: 1rem;
+    inset-inline: max(0.75rem, env(safe-area-inset-left)) max(0.75rem, env(safe-area-inset-right));
     width: auto;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-slot="toast"]) {
+    animation: none;
+  }
+}

package/templates/theme/styles/overlays/tooltip.css

@@ -20,64 +20,91 @@
   }
 }
 
-[data-slot="tooltip-content"] {
+:where([data-slot="tooltip-content"]) {
+  --_tooltip-surface: var(--ak-color-surface-overlay);
+  --_tooltip-border: color-mix(
+    in srgb,
+    var(--ak-color-border-subtle) 88%,
+    var(--_tooltip-surface) 12%
+  );
+
   position: relative;
-  max-width: 18rem;
-  padding: 0.45rem 0.65rem;
-  border: 1px solid color-mix(in srgb, var(--ak-color-border) 48%, transparent);
+  box-sizing: border-box;
+  min-inline-size: 0;
+  max-inline-size: min(18rem, calc(100vw - 1rem));
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--_tooltip-border);
   border-radius: var(--ak-radius-md);
-  background: var(--ak-color-text);
-  color: var(--ak-color-text-inverse);
+  background: var(--_tooltip-surface);
+  color: var(--ak-color-text);
   font-size: var(--ak-font-size-sm);
+  line-height: var(--ak-line-height-normal);
+  overflow-wrap: anywhere;
   box-shadow: var(--ak-shadow-md);
+  z-index: var(--ak-z-tooltip);
+  transform-origin: bottom center;
   animation: ak-tooltip-in var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-[data-slot="tooltip-content"]::before {
+:where([data-slot="tooltip-content"])::before {
   content: "";
   position: absolute;
   inline-size: 0;
   block-size: 0;
   border-inline-start: 0.38rem solid transparent;
   border-inline-end: 0.38rem solid transparent;
-  border-block-start: 0.38rem solid var(--ak-color-text);
+  border-block-start: 0.38rem solid var(--_tooltip-surface);
 }
 
-[data-slot="tooltip-content"]:not([data-side])::before,
-[data-slot="tooltip-content"][data-side="top"]::before {
+:where([data-slot="tooltip-content"]:not([data-side]))::before,
+:where([data-slot="tooltip-content"][data-side="top"])::before {
   inset-block-end: -0.3rem;
   inset-inline-start: 50%;
   transform: translateX(-50%);
 }
 
-[data-slot="tooltip-content"][data-side="bottom"]::before {
+:where([data-slot="tooltip-content"][data-side="bottom"])::before {
   inset-block-start: -0.3rem;
   inset-inline-start: 50%;
   transform: translateX(-50%) rotate(180deg);
 }
 
-[data-slot="tooltip-content"][data-side="left"]::before {
+:where([data-slot="tooltip-content"][data-side="left"])::before {
   inset-inline-end: -0.3rem;
   inset-block-start: 50%;
   transform: translateY(-50%) rotate(90deg);
 }
 
-[data-slot="tooltip-content"][data-side="right"]::before {
+:where([data-slot="tooltip-content"][data-side="right"])::before {
   inset-inline-start: -0.3rem;
   inset-block-start: 50%;
   transform: translateY(-50%) rotate(-90deg);
 }
 
-[data-slot="tooltip-content"][data-state="closed"] {
+:where([data-slot="tooltip-content"][data-state="closed"]) {
   animation: ak-tooltip-out var(--ak-duration-fast) var(--ak-ease-standard);
+  pointer-events: none;
+}
+
+:where([data-slot="tooltip-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);
 }
 
-[data-slot="tooltip-trigger"][data-state="open"] {
-  box-shadow: 0 0 0 3px var(--ak-color-focus-ring);
+:where([data-slot="tooltip-trigger"][data-state="open"]) {
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
-[data-slot="tooltip-trigger"][data-disabled] {
-  opacity: 0.5;
+:where([data-slot="tooltip-trigger"][data-disabled]) {
+  color: var(--ak-color-disabled-text);
   cursor: not-allowed;
   pointer-events: none;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-slot="tooltip-content"]) {
+    animation: none;
+  }
+}