@askrjs/themes 0.0.3 → 0.0.6

package/src/themes/default/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;
+  }
+}

package/src/themes/default/styles/shell/header.css

@@ -2,9 +2,24 @@
   :where(.header, [data-slot="header"]) {
     position: relative;
     z-index: var(--ak-z-sticky);
-    border-block-end: 1px solid color-mix(in srgb, var(--ak-color-border) 88%, white 12%);
-    background: color-mix(in srgb, var(--ak-color-surface) 96%, transparent);
-    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.34) inset;
+    display: flex;
+    align-items: center;
+    min-inline-size: 0;
+    padding-block: var(--ak-space-xs);
+    border-block-end: 1px solid
+      color-mix(in srgb, var(--ak-color-border) 88%, var(--ak-color-surface) 12%);
+    background: color-mix(in srgb, var(--ak-color-surface) 90%, transparent);
+    backdrop-filter: saturate(180%) blur(14px);
+    box-shadow: none;
+  }
+
+  :where(.header, [data-slot="header"]) > :where([data-slot="container"]) {
+    inline-size: 100%;
+    min-inline-size: 0;
+  }
+
+  :where(.header, [data-slot="header"]) :where(.navbar-brand, [data-slot="navbar-brand"]) {
+    min-block-size: var(--ak-density-control-height-md);
   }
 
   :where(.header, [data-slot="header"])[data-position="static"] {